导入js库
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
默认校验规则
序号 | 规则 | 描述 |
1 | require:true | 必须输入的字段 |
2 | remote:"check.php" | 使用ajax方法调用check.php验证入值 |
3 | email:true | 必须输入正确格式的电子邮件 |
4 | url:true | 必须输入正确格式的网址 |
5 | date:true | 必须输入正确格式的日期 |
6 | dateISO:true | 必须输入正确格式的日期(ISO) |
7 | number:true | 必须输入合法的数字 |
8 | digits:true | 必须输入整数 |
9 | creditcard: | 必须输入合法的信用卡号 |
10 | equalTo:"#field" | 输入值必须和#field相同 |
11 | accept: | 输入拥有合法后缀的字符串(上传文件的后缀) |
12 | maxlength:5 | 输入长度最多是5的字符串(汉字算一个字符) |
13 | minlength:10 | 输入长度最小是10的字符串 |
14 | rangelength:[5,10] | 输入长度必须介于5和10之间的字符串 |
15 | range:[5,10] | 输入值必须介于5和10之间 |
16 | max:5 | 输入值不能大于5 |
17 | min:10 | 输入值不能小于10 |
使用方式
1.将校验规则写到控件中
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
6 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
7 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
8 <script>
9 $.validator.setDefaults({
10 submitHandler: function() {
11 alert("提交事件!");
12 }
13 });
14 $().ready(function() {
15 $("#commentForm").validate();
16 });
17 </script>
18 <style>
19 .error{
20 color:red;
21 }
22 </style>
23 </head>
24 <body>
25 <form class="cmxform" id="commentForm" method="get" action="">
26 <fieldset>
27 <legend>输入您的名字,邮箱,URL,备注。</legend>
28 <p>
29 <label for="cname">Name (必需, 最小两个字母)</label>
30 <input id="cname" name="name" minlength="2" type="text" required>
31 </p>
32 <p>
33 <label for="cemail">E-Mail (必需)</label>
34 <input id="cemail" type="email" name="email" required>
35 </p>
36 <p>
37 <label for="curl">URL (可选)</label>
38 <input id="curl" type="url" name="url">
39 </p>
40 <p>
41 <label for="ccomment">备注 (必需)</label>
42 <textarea id="ccomment" name="comment" required></textarea>
43 </p>
44 <p>
45 <input class="submit" type="submit" value="Submit">
46 </p>
47 </fieldset>
48 </form>
49 </body>
50 </html>
View Code
2.将校验规则写到js代码中
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
6 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
7 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
8 <script>
9 $.validator.setDefaults({
10 submitHandler: function() {
11 alert("提交事件!");
12 }
13 });
14 $().ready(function() {
15 // 在键盘按下并释放及提交后验证提交表单
16 $("#signupForm").validate({
17 rules: {
18 firstname: "required",
19 lastname: "required",
20 username: {
21 required: true,
22 minlength: 2
23 },
24 password: {
25 required: true,
26 minlength: 5
27 },
28 confirm_password: {
29 required: true,
30 minlength: 5,
31 equalTo: "#password"
32 },
33 email: {
34 required: true,
35 email: true
36 },
37 "topic[]": {
38 required: "#newsletter:checked",
39 minlength: 2
40 },
41 agree: "required"
42 },
43 messages: {
44 firstname: "请输入您的名字",
45 lastname: "请输入您的姓氏",
46 username: {
47 required: "请输入用户名",
48 minlength: "用户名必需由两个字母组成"
49 },
50 password: {
51 required: "请输入密码",
52 minlength: "密码长度不能小于 5 个字母"
53 },
54 confirm_password: {
55 required: "请输入密码",
56 minlength: "密码长度不能小于 5 个字母",
57 equalTo: "两次密码输入不一致"
58 },
59 email: "请输入一个正确的邮箱",
60 agree: "请接受我们的声明",
61 topic: "请选择两个主题"
62 }
63 });
64 });
65 </script>
66 <style>
67 .error{
68 color:red;
69 }
70 </style>
71 </head>
72 <body>
73 <form class="cmxform" id="signupForm" method="get" action="">
74 <fieldset>
75 <legend>验证完整的表单</legend>
76 <p>
77 <label for="firstname">名字</label>
78 <input id="firstname" name="firstname" type="text">
79 </p>
80 <p>
81 <label for="lastname">姓氏</label>
82 <input id="lastname" name="lastname" type="text">
83 </p>
84 <p>
85 <label for="username">用户名</label>
86 <input id="username" name="username" type="text">
87 </p>
88 <p>
89 <label for="password">密码</label>
90 <input id="password" name="password" type="password">
91 </p>
92 <p>
93 <label for="confirm_password">验证密码</label>
94 <input id="confirm_password" name="confirm_password" type="password">
95 </p>
96 <p>
97 <label for="email">Email</label>
98 <input id="email" name="email" type="email">
99 </p>
100 <p>
101 <label for="agree">请同意我们的声明</label>
102 <input type="checkbox" class="checkbox" id="agree" name="agree">
103 </p>
104 <p>
105 <label for="newsletter">我乐意接收新信息</label>
106 <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
107 </p>
108 <fieldset id="newsletter_topics">
109 <legend>主题 (至少选择两个) - 注意:如果没有勾选“我乐意接收新信息”以下选项会隐藏,但我们这里作为演示让它可见</legend>
110 <label for="topic_marketflash">
111 <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic[]">Marketflash
112 </label>
113 <label for="topic_fuzz">
114 <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic[]">Latest fuzz
115 </label>
116 <label for="topic_digester">
117 <input type="checkbox" id="topic_digester" value="digester" name="topic[]">Mailing list digester
118 </label>
119 <label for="topic" class="error" style="display:none">至少选择两个</label>
120 </fieldset>
121 <p>
122 <input class="submit" type="submit" value="提交">
123 </p>
124 </fieldset>
125 </form>
126 </body>
127 </html>
View Code
required的使用:
required: true 值是必须的。
required: "#aa:checked" 表达式的值为真,则需要验证。
required: function(){} 返回为真,表示需要验证。
常用的方法
1.用其他方式替代默认的submit
1 $().ready(function() {
2 $("#signupForm").validate({
3 submitHandler:function(form){
4 alert("提交事件!");
5 form.submit();
6 }
7 });
8 });
使用ajax方式
1 $(".selector").validate({
2 submitHandler: function(form)
3 {
4 $(form).ajaxSubmit();
5 }
6 })
可以设置 validate 的默认值,写法如下:
1 $.validator.setDefaults({ 2 submitHandler: function(form) { alert("提交事件!");form.submit(); } 3
2.debug,只验证不提交表单
如果这个参数为true,那么表单不会提交,只进行检查,调试十分方便。
1 $().ready(function() { 2 $("#signupForm").validate({ 3 debug:true 4 }); 5 });
如果一个页面中有多个表单都想设置成为debug,则使用:
1 $.validator.setDefaults({ 2 debug: true 3 })
3.ignore:忽略某些元素不验证
ignore:".ignore"
4.更改错误信息显示的位置
errorPlacement:Callback
指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面。
1 errorPlacement:function(error,element){ 2 rerror.appendTo(element.parent()); 3 }
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>菜鸟教程(runoob.com)</title>
6 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
7 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
8 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
9 <script>
10 $.validator.setDefaults({
11 submitHandler: function() {
12 alert("提交事件!");
13 }
14 });
15
16 $().ready(function() {
17 // 提交时验证表单
18 var validator = $("#form1").validate({
19 errorPlacement: function(error, element) {
20 // Append error within linked label
21 $( element )
22 .closest( "form" )
23 .find( "label[for='" + element.attr( "id" ) + "']" )
24 .append( error );
25 },
26 errorElement: "span",
27 messages: {
28 user: {
29 required: " (必需字段)",
30 minlength: " (不能少于 3 个字母)"
31 },
32 password: {
33 required: " (必需字段)",
34 minlength: " (字母不能少于 5 个且不能大于 12 个)",
35 maxlength: " (字母不能少于 5 个且不能大于 12 个)"
36 }
37 }
38 });
39
40 $(".cancel").click(function() {
41 validator.resetForm();
42 });
43 });
44 </script>
45 <style>
46 .error{
47 color:red;
48 }
49 </style>
50 </head>
51 <body>
52 <form method="get" class="cmxform" id="form1" action="">
53 <fieldset>
54 <legend>登录框</legend>
55 <p>
56 <label for="user">用户名</label>
57 <input id="user" name="user" required minlength="3">
58 </p>
59 <p>
60 <label for="password">密码</label>
61 <input id="password" type="password" maxlength="12" name="password" required minlength="5">
62 </p>
63 <p>
64 <input class="submit" type="submit" value="Login">
65 </p>
66 </fieldset>
67 </form>
68 </body>
69 </html>
View Code
5.每个字段验证通过执行函数
success:String,Callback
要验证的元素通过验证后的动作,如果跟一个字符串,会当作一个 css 类,也可跟一个函数。
1 success: function(label) {
2 // set as text for IE
3 label.html(" ").addClass("checked");
4 //label.addClass("valid").text("Ok!")
5 }
6.异步验证
remote:url
使用ajax方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data选项
remote:"check-email.php"
1 remote:{
2 url:"check-email.php",
3 type:"post",
4 dataType:"json",
5 data:{
6 username:function(){
7
8 return $("#username").val();
9 }}
10
11 }