使用 jquery 验证插件进行多案例验证答案

【问题标题】：Multiple case validation using jquery validation plugin使用 jquery 验证插件进行多案例验证
【发布时间】：2015-06-15 05:30:43
【问题描述】：

我在 html 中创建了以下登录表单，并使用 jquery validate 插件完成了验证。 http://jqueryvalidation.org/ 在这里，当单击登录按钮时，我正在验证整个登录表单。

    <form method="POST" id="LoginForm">
        <label>Email</label>
        <input type="text" id="user_Email" name="user_Email" />
        <br>
        <label>Password</label>
        <input type="password" id="user_Pass" name="user_Pass" />
        <br>
        <input type="button" value="Login" id="btnLogin">
    </form>

验证脚本

$("#LoginForm").validate({
    rules: {
        user_Email: {
            required: true,
            email: true
        },
        user_Pass: {
            required: true
        }
    },
    messages: {
        user_Email: {
            required: "Email is required",
            email: "Enter a valid email address"
        },
        user_Pass: {
            required: "Password is required"
        }
    }
});
$('#btnLogin').click(function() {
    var form = $('#LoginForm');
    if (form.valid()) {
        // submit the form data
    }
});

就像在单击按钮时使用错误标签验证整个表单一样，我也想仅验证没有错误标签和错误类的电子邮件字段以用于另一种情况。当用户输入电子邮件地址时，我想验证电子邮件地址的有效性（真或假）而不验证整个表单并且不显示错误标签。只是有效性。如何使用 jquery 验证插件来实现这一点。我试过jquery输入文本更改事件，但它不起作用。

$('#user_Email').on('input',function(){
    //check for a valid email address on text change of email input
})

请帮助我。谢谢。

【问题讨论】：

AFAIK，没有办法在不触发验证消息的情况下使用此插件进行有效性测试。这个问题也不清楚。 为什么您需要这样做？数据要么有效，要么无效……不通知用户有什么意义？

标签： javascript jquery forms jquery-validate

【解决方案1】：

添加这个

$( "#user_Email" ).focusout(function() {
  var re    = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  var email = $("#user_Email").val();
  if(!re.test(email)) {
      //give proper valodation message here
      alert("Invalid Email...!!");
      $("#user_Email").focus();
      }
});

当给出无效的电子邮件地址并传递到下一个字段并且光标将返回电子邮件字段时，这将显示警报消息

编辑

根据您的评论，使用http://jqueryvalidation.org/ 进行验证单个字段（电子邮件）如下所示。

  $('#btnLogin').click(function() {
        if($("#LoginForm").validate().element($("#user_Email"))){
        //give proper valodation message here
        alert("Invalid Email..!!");
        }
    });

享受编码... :)

【讨论】：

是的，这是正确的。但是有什么方法可以使用 jquery 验证插件来实现这一点。假设我有一个包含 10 个字段的表单，我想在单击一个按钮时验证前 5 个字段，在另一个按钮单击时验证最后 5 个字段，使用 jquery validate ???
查看已编辑的代码并添加到您的代码中.. 享受编码:)
这个答案有用吗？

【解决方案2】：

检查这个小而简单的插件

http://suraj-mahajan.github.io/Validate-In-Grid-Controls/

【讨论】：