jqueryフォームの検証でエラーメッセージが表示される

Question

ここでは、値を入力せずにsubmitをクリックすると、警告クラスを追加したjqueryのフォーム検証用のコードです。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

あなたのコードは基本的に2つの問題があります。

最初に：あなたはこれらの2つの場所にカンマを追加するのを忘れ：

{ 
    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)(?=.*[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; 
 
} 
 

 
$('#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コードを入力すると[ヘルプを作成する]ことがさらに助かります}