使用jquery验证插件的多个案例验证

Question

我在html中创建了以下登录表单，并使用jquery验证插件进行了验证。在这里，当单击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
    }
});

就像单击按钮时使用错误标签验证整个表单一样，我还希望只验证电子邮件字段，而不包含错误标签和其他情况下的错误类。当用户输入电子邮件地址时，我想验证电子邮件地址(真或假)的有效性，而不验证整个表单，也不显示错误label.Just的有效性。如何使用jquery验证插件来实现这一点。我尝试过jquery输入文本更改事件，但它不起作用。

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

请帮我这个忙。谢谢。

Answer 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..!!");
        }
    });

享受编码..。:)

Answer 2

检查这个小而简单的插件

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