Question

这是我在jquery中进行表单验证的代码，其中我添加了alert类，当我单击提交而不输入值时，alert类将应用于每个字段，但在我的代码中{{1} } class不适用于电子邮件和密码验证。

alert

任何建议？

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）

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

^（1） _{请考虑在问题中提供MCVE代码[或制作小提琴]将有更多帮助< /子>}

jquery表单验证中的错误消息

1 个答案: