javascript - 为什么我的 Javascript 表单验证不能正常工作？

Question

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

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";

}

Answer 1

您的验证器将在电子邮件上失败，因为您正在向 .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 用于不区分大小写的匹配，因此不必全大写输入电子邮件。