1

谁能告诉我如何使用 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>

验证不起作用。

请帮帮我。

4

1 回答 1

5

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

你的代码有很多问题：

  • 缺少右括号，}
  • 您没有名为 的字段"gender"，因此我删除了此规则。
  • username:"required",不是此规则的典型格式。应该required: true,
  • 当字段"username"的name属性为"email"
  • #loginForm你的 jQuery 代码拼错了
  • 如果要在 jQuery 中指定规则，则不需要，因此请从 HTML 中删除class="required"它。input
  • 删除了许多“尾随逗号”，这将导致某些版本的资源管理器出现问题

提示：当代码正确缩进时，您的许多语法错误会更容易发现。

假设您的 HTMLform是正确的，您的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/

于 2013-01-05T18:43:53.827 回答