jQuery表单验证中的错误消息

莫沙

这是我在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-\.][email protected]([\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;
}

有什么建议吗?

微创

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

首先:您忘记在这两个位置添加逗号:

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

第二:至于电子邮件部分,您的正则表达式有误,请更改此行:

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

对此:

var emailReg = /^([\w-\.][email protected]([\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-\.][email protected]([\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代码(或摆弄小提琴)会带来更多帮助

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery验证错误消息放置

来自分类Dev

JQuery在多个位置(表单顶部和表单级别)验证自定义错误消息

来自分类Dev

HTML中的表单验证Jquery

来自分类Dev

在Play Framework 2中如何在没有表单助手的情况下获取完整的表单验证错误消息?

来自分类Dev

jQuery验证远程错误消息

来自分类Dev

jQuery Mobile:如何验证表单并在页面上显示错误消息

来自分类Dev

在angularjs表单验证中提交表单之前显示错误消息

来自分类Dev

jQuery验证-在错误消息中显示字段名称

来自分类Dev

使用jQuery验证在错误消息中显示输入值

来自分类Dev

PHP中的表单验证错误

来自分类Dev

当用户不输入内容时,我想在表单验证中显示错误消息

来自分类Dev

为什么简单表单无法在Rails中显示验证错误消息?

来自分类Dev

表单验证错误消息未显示在ModelForm中

来自分类Dev

jQuery验证错误消息到位

来自分类Dev

验证表单-出现多个错误消息

来自分类Dev

在angularjs表单验证中提交表单之前显示错误消息

来自分类Dev

多个表单验证中的表单验证错误

来自分类Dev

Zend表单验证设置错误消息

来自分类Dev

jQuery-表单验证,将CSS样式添加到错误消息

来自分类Dev

在表单验证中同时显示所有错误消息

来自分类Dev

如何使PHP验证表单中的下拉菜单显示“ *必填字段”错误消息?

来自分类Dev

Symfony 2.6表单验证和错误消息

来自分类Dev

PHP中的表单验证错误

来自分类Dev

表单验证错误消息未按预期出现

来自分类Dev

错误消息在简单的 javascript 表单验证中不起作用

来自分类Dev

jQuery - 在表单顶部显示错误消息

来自分类Dev

表单验证 - 错误消息不输出

来自分类Dev

在 Spring 5 中,如何自定义表单验证错误消息?

来自分类Dev

在表单数组 angular 中验证和显示特定表单控制器的错误消息

Related 相关文章

  1. 1

    jQuery验证错误消息放置

  2. 2

    JQuery在多个位置(表单顶部和表单级别)验证自定义错误消息

  3. 3

    HTML中的表单验证Jquery

  4. 4

    在Play Framework 2中如何在没有表单助手的情况下获取完整的表单验证错误消息?

  5. 5

    jQuery验证远程错误消息

  6. 6

    jQuery Mobile:如何验证表单并在页面上显示错误消息

  7. 7

    在angularjs表单验证中提交表单之前显示错误消息

  8. 8

    jQuery验证-在错误消息中显示字段名称

  9. 9

    使用jQuery验证在错误消息中显示输入值

  10. 10

    PHP中的表单验证错误

  11. 11

    当用户不输入内容时,我想在表单验证中显示错误消息

  12. 12

    为什么简单表单无法在Rails中显示验证错误消息?

  13. 13

    表单验证错误消息未显示在ModelForm中

  14. 14

    jQuery验证错误消息到位

  15. 15

    验证表单-出现多个错误消息

  16. 16

    在angularjs表单验证中提交表单之前显示错误消息

  17. 17

    多个表单验证中的表单验证错误

  18. 18

    Zend表单验证设置错误消息

  19. 19

    jQuery-表单验证,将CSS样式添加到错误消息

  20. 20

    在表单验证中同时显示所有错误消息

  21. 21

    如何使PHP验证表单中的下拉菜单显示“ *必填字段”错误消息?

  22. 22

    Symfony 2.6表单验证和错误消息

  23. 23

    PHP中的表单验证错误

  24. 24

    表单验证错误消息未按预期出现

  25. 25

    错误消息在简单的 javascript 表单验证中不起作用

  26. 26

    jQuery - 在表单顶部显示错误消息

  27. 27

    表单验证 - 错误消息不输出

  28. 28

    在 Spring 5 中,如何自定义表单验证错误消息?

  29. 29

    在表单数组 angular 中验证和显示特定表单控制器的错误消息

热门标签

归档