為什么我的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用於不區分大小寫的匹配，因此不必大寫輸入電子郵件。