Question

我使用以下javascript进行表单验证：

<script type="text/javascript">
function validate_form ( )
{
    valid = true;

        if ( document.contact_form.contact_name.value == "" )
        {
                alert ( "Please fill in the 'Your Name' box." );
                valid = false;
        }

        if ( ( document.contact_form.gender[0].checked == false ) && ( document.contact_form.gender[1].checked == false ) )
        {
                alert ( "Please choose your Gender: Male or Female" );
                valid = false;
        }

        if ( document.contact_form.age.selectedIndex == 0 )
        {
                alert ( "Please select your Age." );
                valid = false;
        }

        if ( document.contact_form.terms.checked == false )
        {
                alert ( "Please check the Terms & Conditions box." );
                valid = false;
        }

        return valid;
}
</script>

表格：

<form name="contact_form" method="post" action="somepage.php" onSubmit="return validate_form();">

<h1>Please Enter Your Details Below</h1>

<p>Your Name: <input type="text" name="contact_name"></p>

<p>Your Gender: <input type="radio" name="gender" value="Male"> Male
&nbsp; <input type="radio" name="gender" value="Female"> Female</p>

<p>Your Age:

<select name="age">
    <option value="">Please Select an Option:</option>
    <option value="0-18 years">0-18 years</option>
    <option value="18-30 years">18-30 years</option>
    <option value="30-45 years">30-45 years</option>
    <option value="45-60 years">45-60 years</option>
    <option value="60+ years">60+ years</option>
</select>

<p>Do you agree to the Terms and Conditions?
<input type="checkbox" name="terms" value="Yes"> Yes

<p><input type="submit" name="send" value="Send Details"></p>

</form>

验证工作正常，但它会显示一个又一个警告框，指出尚未填写或选择的字段。

如何修改此脚本，以便在 ONE 警告框中指出所有缺少的字段，如：

请填写以下字段：姓名，性别，年龄，条款和条件

Answer 1

使用字符串或数组（如下例所示）累积错误字段，然后根据其内容生成警告语句和返回值。例如：

function validate_form () {
  var invalid=[], form=document.contact_form;
  if (form.contact_name.value == "") {
    invalid.push('Name');
  }
  if ((form.gender[0].checked == false) && (form.gender[1].checked == false)) {
    invalid.push('Gender');
  }
  if (form.age.selectedIndex == 0) {
    invalid.push('Age');
  }
  if (form.terms.checked == false) {
    invalid.push('Terms and Conditions');
  }
  if (invalid.length > 0) {
    alert('Please fill in the following fields: ' + invalid.join(', ') + '.');
    return false;
  }
  return true;
}

Answer 2

function validate_form ( )
{
    valid = true;
    var myArray= new Array();

        if ( document.contact_form.contact_name.value == "" )
        {
                myArray.push('Name');
                valid = false;
        }

        if ( ( document.contact_form.gender[0].checked == false ) && ( document.contact_form.gender[1].checked == false ) )
        {
                myArray.push('Gender');
                valid = false;
        }

        if ( document.contact_form.age.selectedIndex == 0 )
        {
                myArray.push('Age');
                valid = false;
        }

        if ( document.contact_form.terms.checked == false )
        {
                myArray.push('Term & Conditions');
                valid = false;
        }
        if (valid==false)
             alert ( "Please fill in the following fields: "+myArray);
        return valid;
}

简单的

function validate_form ( )
{
    var myArray= new Array();
        if ( document.contact_form.contact_name.value == "" )
              myArray.push('Name');
        if ( ( document.contact_form.gender[0].checked == false ) && ( document.contact_form.gender[1].checked == false ) )
              myArray.push('Gender');
        if ( document.contact_form.age.selectedIndex == 0 )
              myArray.push('Age');
        if ( document.contact_form.terms.checked == false )
                myArray.push('Term & Conditions');
        if (myArray.length>=0){
             alert ( "Please fill in the following fields: "+myArray);
             return false;
    }
        return true;
}

Answer 3

你不应该真的依赖于document.form.Foo语法，而应该给出元素id并使用getElementById来选择它们。无论如何“

function validate_form(){
    var valid = true,
        errors = [];

    if (document.contact_form.contact_name.value == "") {
        error.push("Please fill in the 'Your Name' box.");
        valid = false;
    }

    if ((document.contact_form.gender[0].checked == false) && (document.contact_form.gender[1].checked == false)) {
        errors.push("Please choose your Gender: Male or Female");
        valid = false;
    }

    if (document.contact_form.age.selectedIndex == 0) {
        errors.push("Please select your Age.");
        valid = false;
    }

    if (document.contact_form.terms.checked == false) {
        errors.push("Please check the Terms & Conditions box.");
        valid = false;
    }

    if(errors.length > 0){
        alert('Errors:\n' + errors.join('\n'));
    }

    return valid;
}

Answer 4

最好去jQuery validation plugin。它简单，灵活，直接且实施起来非常快。

否则请使用@Evan建议的技巧。

如何修复此Javascript表单验证脚本？

4 个答案: