如何使用jQuery验证登录表单? [英] How to validate a login form with jQuery?

问题描述

有人可以告诉我如何使用jQuery Validate插件来验证登录表单吗?

Can anyone please tell me how to validate a login form with the jQuery Validate plugin?

我尝试了以下代码:

    <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>

验证无效.

请帮帮我.

推荐答案

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

It's not working because you have a multitude of syntax and formatting errors. The validate() plugin uses the name attribute on input fields. Your two fields are using email and password for their name attribute. I don't even know why your function contains gender, because it's not contained in your HTML anywhere that I can see.

您的代码有很多问题:

• 缺少右括号，}
• 您没有名为"gender"的字段，因此我删除了此规则.
• username:"required",不是此规则的典型格式.应该是required: true,
• 当字段的name属性为"email"
时，不正确地定位了"username"
• 您在jQuery代码中拼错了#loginForm
• 如果要在jQuery中指定规则，则不需要input中的class="required"，因此请将其从HTML中删除.
• 已删除许多尾随逗号"，这将在某些版本的Explorer中引起问题

• missing a closing brace, }
• you do not have a field named "gender", so I removed this rule.
• username:"required", is not typical format for this rule. Should be required: true,
• improperly targeting "username" when the field's name attribute is "email"
• you misspelled #loginForm in your jQuery code
• you do not need class="required" in the input if you're going to specify rules within the jQuery, so remove that from your HTML.
• many "trailing commas" removed which will cause issues in certain versions of Explorer

只是一个提示:如果代码正确缩进，您的许多语法错误将更容易发现.

Just a tip: Many of your syntax errors would be much easier to spot when the code is properly indented.

假设您的form的HTML是正确的，则您的 jQuery 应该如下所示:

Assuming the HTML of your form is correct, your jQuery should look like this:

$(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://jsfiddle.net/fYdkL/1/

文档:

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

正式示例:

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

这篇关于如何使用jQuery验证登录表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！