Question

使用Jquery Validate插件，是否有一种方法可以在按下第一个键时立即验证，并在输入所需内容之前显示错误消息？

所以输入字段中的第一个按键我想要验证消息出现，直到他们正确输入了所需内容

我的代码在

下面

       <?php
// Error Config
include_once("PHP/Config.php");
// Session
include_once("PHP/Session.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>TBA </title>

<meta name="description" content="Coming soon
<meta name="keywords" content="

" />
<link rel="icon" type="image/ico" href="favicon.ico"/>

<link href="CSS/Site_Style.css" rel="stylesheet" type="text/css" />
<link href="CSS/Register_Form.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"  src="JS/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.validate.js"></script>
<script type="text/javascript"  src="JS/additional-methods.min.js"></script>

<script>
$(document).ready(function () {

    $("#SignUp").validate({
        rules: {
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                password: true
            },
            confirm_password: {
                required: true,
                password: true,
                notEqual: "#password"
            },
            company: {
                nls: true,
                required: true
            },
            telephone: {
                phone: true
            }
        }
    });

    $.validator.addMethod("email", function (value, element) {
        return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
    }, "Please enter a valid email address");

    $.validator.addMethod("password", function (value, element) {
        return this.optional(element) || /^[A-Za-z0-9!@#$%^&*()_]{6,16}$/i.test(value);
    }, "Passwords are 6-16 characters");

    jQuery.validator.addMethod("notEqual", function (value, element, param) {
        return this.optional(element) || value == param;
    }, "Passwords Do Not Match");

    $.validator.addMethod("nls", function (value, element) {
        return this.optional(element) || /^[a-zA-Z0-9\s.\-_']+$/i.test(value);
    }, "Please Only Enter Alpha Numeric Characters");

    $.validator.addMethod("phone", function (value, element) {
        return this.optional(element) || /(\s*\(?0\d{4}\)?\s*\d{6}\s*)|(\s*\(?0\d{3}\)?\s*\d{3}\s*\d{4}\s*)/i.test(value);
    }, "Please Only Enter UK Telephone Numbers");

});
</script>




</head>

<body>
<div id="Site_Holder">

<div id="Header_Holder">
<?php include_once "PHP/Inserts/Header_Content.php";?>
</div><!-- Header Holder End -->

<div id="Navigation_Holder">

<?php include_once "PHP/Inserts/Navigation_Content.php";?>


</div><!-- Navigation Holder End -->

<div id="Content_Holder">

    <div id="Register_Form_Holder" class="General_text">

         <div class="Blank_Divider">Register a Climbing Centre<br/>
        <br/></div>

        <div class="Blank_Divider"></div>
        <form id="SignUp">



        <div class="Name_Form_Field">E-mail Address:</div>
        <div class="Input_Form_Field"><input id="email" name="email"/></div>

        <div class="Blank_Divider"></div>

        <div class="Name_Form_Field">Password:</div> 
        <div class="Input_Form_Field"><input id="password" name="password" type="password" /></div>

        <div class="Blank_Divider"></div>

        <div class="Name_Form_Field">Confirm Password:</div> 
        <div class="Input_Form_Field"><input id="confirm_password" name="confirm_password" type="password" /></div>

        <div class="Blank_Divider"></div>


        <div class="Blank_Divider">Header
        <br/>
        <br/></div>

        <div class="Name_Form_Field"> Name:</div> 
        <div class="Input_Form_Field"><input id="company" name="company" type="text" /></div>

        <div class="Blank_Divider"></div>

        <div class="Name_Form_Field">Contact Telephone Number:</div> 
        <div class="Input_Form_Field"><input id="telephone" name="telephone" type="text" /></div>



        </form>



    </div>


</div><!-- Content Holder End -->

<div id="Footer_Holder">

<?php include_once "PHP/Inserts/Footer_Content.php";?>

</div><!-- Footer Holder End -->


</div><!-- Site Holder End -->
</body>


</html>

Answer 1

引用OP：

“使用Jquery Validate插件，是否有一种方法可以在按下第一个键时立即验证并显示错误消息，直到它们输入所需内容为止？所以我想要输入字段中的第一个按键要显示的验证消息，直到他们正确输入所需内容。“

这已经是插件的默认行为了。（默认情况下启用onkeyup选项。）

请参阅此简单演示，只要您在第一个字段中输入一个字符（使用email规则），该消息会立即告诉您输入有效的电子邮件地址。只要在第二个字段中输入一个字符，minlength规则就会告诉您输入至少10个字符。如果您开始填写字段然后将其删除，则会显示required规则的消息。消息将按其声明规则的顺序显示（required规则除外）。

$(document).ready(function() {

    $('#myform').validate({
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 10,
                alphanumeric: true
            },
            field3: {
                digits: true,
                minlength: 3
            }
        }
    });

});

DEMO：http://jsfiddle.net/yyR9C/

修改：

相同的jsFiddle，但在OP的编辑中发布了代码：

仍在工作：http://jsfiddle.net/yyR9C/1/

Answer 2

用此

替换验证码

＆＃13;

    $("#SignUp").validate({
     onkeyup: function(element) {
      $(element).valid(); 
    },    
    rules: {
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                password: true
            },
            confirm_password: {
                required: true,
                password: true,
                notEqual: "#password"
            },
            company: {
                nls: true,
                required: true
            },
            telephone: {
                phone: true
            }
        }
    });

＆＃13;

Answer 3

我不确定我是否理解这个问题，但我认为您可以使用jQuery中的keyup事件。像这样的东西

$("#formId input[type=text]").keyup(function(){
     $("#formId").valid(); 
     // Checks whether the selected form is valid or whether all selected elements are valid.

请参阅docs。

}）;

或类似的东西。请详细说明。祝你有个美好的一天。

Jquery验证插件Keydown

3 个答案: