为什么我的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 。

您还必须使用正则表达式作为参数在电子邮件本身上调用.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用于不区分大小写的匹配，因此不必大写输入电子邮件。