HTML表单数据验证功能

Question

我在 JavaScript 中创建了一个函数来验证 html 表单数据，我的代码如下：

function checkPetitionForm_ff() {
    if (document.petition_form.petition_firstname.value == "FIRST NAME" || document.petition_form.petition_firstname.value == "") {
        alert("Please enter your First Name!")
        document.petition_form.petition_firstname.focus();
        return false;
    }

    if (document.petition_form.petition_lastname.value == "LAST NAME" || document.petition_form.petition_lastname.value == "") {
        alert("Please enter your Last Name!")
        document.petition_form.petition_lastname.focus();
        return false;
    }

    if (document.petition_form.petition_age.value == "AGE" || document.petition_form.petition_age.value == "") {
        alert("Please enter your Age!")
        document.petition_form.petition_age.focus();
        return false;
    }

    if (document.petition_form.state.value == "Select State") {
        alert("Please select your state!")
        document.petition_form.state.focus();
        return false;
    }

    if (document.petition_form.petition_address.value == "HOME ADDRESS" || document.petition_form.petition_address.value == "") {
        alert("Please enter your address!")
        document.petition_form.petition_address.focus();
        return false;
    }

    if (document.petition_form.zip.value == "ZIP CODE" || document.petition_form.zip.value == "") {
        alert("Please enter your Zipcode!")
        document.petition_form.zip.focus();
        return false;
    }

    if (document.petition_form.phone2.value == "PHONE" || document.petition_form.phone1.value == "" || isNumeric(document.petition_form.phone1.value) == false) {
        alert("Please enter the complete phone No!")
        document.petition_form.phone2.focus();
        return false;
    }

    if (document.petition_form.phone1.value == "PHONE" || document.petition_form.phone1.value == "" || isNumeric(document.petition_form.phone1.value) == false) {
        alert("Please enter the complete phone No!")
        document.petition_form.phone1.focus();
        return false;
    }


    if (document.petition_form.phone3.value == "PHONE" || document.petition_form.phone1.value == "" || isNumeric(document.petition_form.phone1.value) == false) {
        alert("Please enter the complete phone No!")
        document.petition_form.phone3.focus();
        return false;
    }

    if (document.petition_form.level.value == "YOUR LEVEL OF EDUCATION") {
        alert("Please select your level of education!")
        document.petition_form.level.focus();
        return false;
    }

    if (document.petition_form.degree.value == "DEGREE OF INTEREST") {
        alert("Please select your degree!")
        document.petition_form.degree.focus();
        return false;
    }

    if (!(document.getElementById(edu).checked)) {
        alert("Please select  Education!")
        document.petition_form.edu.focus();
        return false;
    }


    else {
        return true;
    }

}

验证在“phone2”字段之前运行良好，在此之后将不会完成验证。

如果您能帮助我并建议如何解决此问题，我将不胜感激。

Answer 1

我认为您遇到了异常，因为 isNumeric 不是 JavaScript 全局函数。您需要在页面中定义它（查看 在 JavaScript 中验证十进制数字 - IsNumeric() 以获得 <代码>isNumeric）。
此外，您还应该使用异常处理来包围您的方法调用，以获得更好的异常详细信息。

Answer 2

在该行中，您实际上仅在第一个条件下检查 phone2，其他条件是 phone1。

document.petition_form.phone2.value=="PHONE" || document.petition_form.phone1.value=="" || isNumeric(document.petition_form.phone1.value)==false

另请注意，您对 phone3 执行相同的操作。

Answer 3

它看起来像是一个简单的复制/粘贴错误。请注意，phone2 之后引用的 petition_form 成员是 phone1...这没有意义。将此行与您的下一个验证进行比较，其中所有成员都是phone1。

所以，这一行：

      if (document.petition_form.phone2.value == "PHONE" || 
          document.petition_form.phone1.value == "" || 
isNumeric(document.petition_form.phone1.value) == false) {

应该看起来像：（

      if (document.petition_form.phone2.value == "PHONE" || 
          document.petition_form.phone2.value == "" || 
isNumeric(document.petition_form.phone2.value) == false) {

代码以这种方式排列以突出差异。）