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

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"
• 你拼错#loginForm了你的jQuery代码
• 你不需要class="required"在inputjQuery中指定规则,所以从你的HTML中删除它.
• 许多"尾随逗号"被删除,这将导致某些版本的资源管理器出现问题

只是一个提示:当代码正确缩进时,许多语法错误会更容易被发现.

假设你的HTML form是正确的,你的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/