如何使用 jQuery 验证登录表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14171179/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to validate a login form with jQuery?
提问by user1944933
Can anyone please tell me how to validate a login form with the jQuery Validate plugin?
谁能告诉我如何使用 jQuery Validate 插件验证登录表单？
I tried this code:
我试过这个代码：
<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>
and html code as:
和 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>
Validation is not working.
验证不起作用。
Please help me out.
请帮帮我。
回答by Sparky
It's not working because you have a multitude of syntax and formatting errors. The validate()plugin uses the nameattribute on inputfields. Your two fields are using emailand passwordfor their nameattribute. I don't even know why your function contains gender, because it's not contained in your HTML anywhere that I can see.
它不起作用，因为您有大量的语法和格式错误。该validate()插件name在input字段上使用该属性。您的两个字段正在使用email和password用于他们的nameattribute. 我什至不知道为什么你的函数包含gender，因为它没有包含在你的 HTML 中我能看到的任何地方。
Your code has many problems:
你的代码有很多问题：
- 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 berequired: true,- improperly targeting
"username"when the field'snameattribute is"email" - you misspelled
#loginFormin your jQuery code - you do not need
class="required"in theinputif 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
- 缺少右括号，
} - 您没有名为 的字段
"gender"，因此我删除了此规则。 username:"required",不是此规则的典型格式。应该required: true,- 针对不当
"username"当域的name属性"email" - 你
#loginForm在 jQuery 代码中拼错了 - 如果要在 jQuery 中指定规则
class="required"，input则不需要，因此请从 HTML 中删除它。 - 删除了许多“尾随逗号”，这会导致某些版本的 Explorer 出现问题
Just a tip:Many of your syntax errors would be much easier to spot when the code is properly indented.
只是一个提示：当代码正确缩进时，您的许多语法错误会更容易发现。
Assuming the HTML of your formis correct, your jQueryshould look like this:
假设你的 HTMLform是正确的，你的jQuery应该是这样的：
$(document).ready(function(){
$("#loginForm").validate({
rules: {
email: {
required: true
},
password: {
required: true
}
},
messages: {
email: {
required: "specify email"
},
password: {
required: "specify password"
}
}
});
});
Working Demo:
工作演示：
Documentation:
文档：
http://docs.jquery.com/Plugins/Validation
http://docs.jquery.com/Plugins/Validation
Official Examples:
官方示例：
