jquery - jquery 表单验证中的错误消息

Question

这是我在 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

您的代码基本上有两个问题:

首先:你忘记在这两个地方添加逗号:

{
  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 ⁽¹⁾

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>

---

⁽¹⁾ _{请考虑提供 MCVE问题中的代码[或制作 fiddle ]将有更多帮助}