为什么我的Javascript表单验证无法正常工作?

时间:2016-04-22 03:37:05

标签: javascript forms validation

为什么我的验证在第二次尝试失败?首次尝试时,验证工作正常,但在第二次运行时,它将接受电子邮件字段中的不适当值。前两个字段工作正常,但第三个字段将在第一次运行后接受任何文本。但是它只会验证我是否更改了电子邮件字段中的值,否则它将继续显示错误并且无法像它应该那样进行验证。

function validate(){

    clearErrors();

    var errorFlag = true;

    var name = document.getElementById("name");

    nameVal = name.value;

    if(nameVal.length === 0){

        var nameError = document.getElementById("nameError");

        nameError.style.display = "block";

        errorFlag = false;
    }

    var phone = document.getElementById("phone")

    var phoneVal = phone.value;

    if(isNaN(phoneVal) || (phoneVal < 1000000000 || phoneVal >10000000000)){

        errorFlag = false;

        var phoneError = document.getElementById("phoneError");

        phoneError.style.display = "block";
    }



    var email = document.getElementById("email");

    var emailVal = email.value;

    var reStr = "^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$";

    if((reStr.match(emailVal))){

        errorFlag = false;

        var emailError = document.getElementById("emailError");

        emailError.style.display = "block";
    }

    return errorFlag;
}

function clearErrors(){

    var nameError = document.getElementById("nameError");

    nameError.style.display = "none";

    var phoneError = document.getElementById("phoneError");

    phoneError.style.display = "none";

    var emailError = document.getElementById("emailError");

    emailError.style.display = "none";

}

1 个答案:

答案 0 :(得分:2)

您的验证程序将在电子邮件中失败,因为当您需要正则表达式时,您正在向.match提供字符串。

您还必须在电子邮件本身上调用.match,并以正则表达式作为参数。

您还需要否定返回值以检查它是否不匹配,或使用.test

这一位:

var reStr = "^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$";
if((reStr.match(emailVal))){

应替换为:

var re = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
if(!emailVal.match(re)){

如果由于某种原因你不能使用正则表达式文字:

var re = new RegExp("^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$", "i");
if(!emailVal.match(re)){

或使用.test代替.match

var re = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
if(!re.test(emailVal)){

请注意i不区分大小写的匹配,因此不必在全部大写字母中输入电子邮件。