Question

有谁能告诉我如何使用jQuery Validate插件验证登录表单？

我试过这段代码：

    <script src="jquery-1.8.3.js"></script>
<script src="loginbut/js/login.js"></script>
<script src="jquery.validate.js" type="text/javascript">
</script>
<script>
$(document).ready(function(){
$("#loginform").validate({
rules:{
//name:"required",
username:"required",

password:"required",
gender:"required",

},
messages:{
email:"This field cannot be empty",

password:{
required:"specify password",

},

});

});


</script>

和html代码为：

<div id="bar">
    <div id="container">
        <!-- Login Starts Here -->
        <div id="loginContainer">
            <a href="#" id="loginButton"><span>Login</span><em></em></a>
            <div style="clear:both"></div>
            <div id="loginBox">                
                <form id="loginForm">
                    <fieldset id="body">
                        <fieldset>
                            <label for="email">Username</label>
                            <input type="text" name="email" id="email" class="required"/>
                        </fieldset>
                        <fieldset>
                            <label for="password">Password</label>
                            <input type="password" name="password" id="password" class="required"/>
                        </fieldset>
                        <input type="submit" id="login" value="Sign in" />
                        <label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
                    </fieldset>
                    <span><a href="#">Forgot your password?</a></span>
                </form>
            </div>
        </div>
        <!-- Login Ends Here -->
    </div>
</div>

验证无效。

请帮帮我。

Answer 1

它不起作用，因为您有大量的语法和格式错误。 validate()插件使用name字段上的input属性。您的两个字段正在使用email和password用于name attribute。我甚至不知道为什么你的函数包含gender，因为它在我可以看到的任何地方都没有包含在你的HTML中。

您的代码存在许多问题：

错过了大括号}
您没有名为"gender"的字段，因此我删除了此规则。
username:"required",不是此规则的典型格式。应该是required: true,
当字段的"username"属性为name

"email"

您在jQuery代码中拼错了#loginForm
如果您要在jQuery中指定规则，则class="required"中不需要input，因此请从HTML中删除该规则。
删除了许多“尾随逗号”，这会导致某些版本的资源管理器出现问题

只是一个小贴士：当代码正确缩进时，许多语法错误会更容易被发现。

假设您的form的HTML是正确的，那么 jQuery 应该如下所示：

$(document).ready(function(){

    $("#loginForm").validate({
        rules: {
            email: {
                required: true
            },
            password: {
                required: true
            }
        },
        messages: {
            email: {
                required: "specify email"
            },
            password: {
                required: "specify password"
            }
        }
    });

});

工作演示：

<强> http://jsfiddle.net/fYdkL/1/

<强>文档

http://docs.jquery.com/Plugins/Validation

官方示例：

http://jquery.bassistance.de/validate/demo/

如何使用jQuery验证登录表单？

1 个答案: