Question

我在html中创建了以下登录表单，并使用jquery validate plugin完成了验证。 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
})

请帮帮我。谢谢。

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

检查这个小＆amp;简单的插件

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

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

2 个答案: