jQuery表單驗證中的錯誤消息

Question

這是我在jquery中進行表單驗證的代碼，其中添加了警報類，當我單擊Submit而沒有輸入值時， alert類將應用於每個字段，但是在我的代碼中，此alert類不適用於電子郵件和密碼驗證。

function validate() {
    var errorFlag = true;
    var userinput = $('#username').val();
    var mobilenumber=$('#mobnum').val();
    // var emailid=$('#mail').val();
    // var password=$('#pwd').val();
    var address1=$('#addr1').val();
    var address2=$('#addr2').val();

    var characterReg = /^([a-zA-Z]{2,30})$/;
    var numericReg=/^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
    // var emailReg=/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    // var passReg=/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$/;
    var addrReg = /^\s*[a-zA-Z0-9,\s]+\s*$/;

    var inputData = [{
        id : "username",
        regex : characterReg
    }, {
        id : "mobnum",
        regex : numericReg
    }, 
    // {
    //  id:"mail"
    //  regex: emailReg
    // },{
    //  id:"pwd"
    //  regex:passReg
    // },
    {
        id : "addr1",
        regex : addrReg
    }, {
        id : "addr2",
        regex : characterReg
    }];

    for(var index=0; index < inputData.length; index++) {

        var data = inputData[index];
        var regex = data.regex;
        if(!regex.test($('#' + data.id).val())) {
            errorFlag = false;
            $('#' + data.id).addClass('alert');
        } else {
            $('#' + data.id).removeClass('alert');
        }
    }
    return errorFlag;
}

有什么建議嗎？

Answer 1

您的代碼基本上有兩個問題：

首先：您忘記在這兩個位置添加逗號：

{
  id:"mail"  <----------here
  regex: emailReg
},{
  id:"pwd" <----------here
  regex:passReg
}

第二：至於電子郵件部分，您的正則表達式有誤，請更改此行：

var emailReg=/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

對此：

var emailReg = /^([\w-\.]+@([\w-]+)+(\.[\w-]{2,4})?)$/;

代碼： jsFiddle ^（1）

 function validate() { var errorFlag = true; var userinput = $('#username').val(); var mobilenumber = $('#mobnum').val(); var emailid = $('#mail').val(); var password = $('#pwd').val(); var address1 = $('#addr1').val(); var address2 = $('#addr2').val(); var characterReg = /^([a-zA-Z]{2,30})$/; var numericReg = /^\\d*[0-9](|.\\d*[0-9]|,\\d*[0-9])?$/; var emailReg = /^([\\w-\\.]+@([\\w-]+)+(\\.[\\w-]{2,4})?)$/; var passReg = /^(?=.*\\d)(?=.*[az])(?=.*[AZ])(?!.*\\s).*$/; var addrReg = /^\\s*[a-zA-Z0-9,\\s]+\\s*$/; var inputData = [{ id: "username", regex: characterReg }, { id: "mobnum", regex: numericReg }, { id: "mail", regex: emailReg }, { id: "pwd", regex: passReg }, { id: "addr1", regex: addrReg }, { id: "addr2", regex: characterReg }]; for (var index = 0; index < inputData.length; index++) { var data = inputData[index]; var regex = data.regex; if (!regex.test($('#' + data.id).val())) { errorFlag = false; $('#' + data.id).addClass('alert'); } else { $('#' + data.id).removeClass('alert'); } } return errorFlag; } $('#btnGo').on('click', validate); 

 input { display: block; margin-bottom: 5px; width: 300px; padding: 10px; } .alert { border: 4px red solid; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <input type="text" id="username" placeholder="your username"> <input type="text" id="mobnum" placeholder="your mobile number"> <input type="text" id="mail" placeholder="your email"> <input type="text" id="pwd" placeholder="your password"> <input type="text" id="addr1" placeholder="your address - line 1"> <input type="text" id="addr2" placeholder="your address - line 2"> <button id="btnGo">Go</button> 

---

^（1） _{請考慮在問題中提供MCVE代碼（或擺弄小提琴）會有所幫助}