jQuery.Validate表单验证插件
教程地址
地址在这:http://www.runoob.com/jquery/jquery-plugin-validate.html,比这篇说的要详细,此篇只是自己初学的笔记,有更多的方法看教程比较好.
插件地址
自己打包了使用此功能必须的插件:点我下载
默认校验规则
| 规则 | 描述 |
|---|---|
| required:true | 必须输入的字段 |
| remote:'check.php' | 使用ajax方式调用check.php验证输入值 |
| email:true | 必须输入正确格式的邮箱地址 |
| url:true | 必须输入正确格式的网址 |
| date:true | 必须输入正确格式的日期。日期校验 ie6 出错，慎用。 |
| dateISO:true | 必须输入正确格式的日期(ISO),例如:2009-02-16,1998/09/12,只验证格式,不验证有效性 |
| number:true | 必须输入合法的数字(负数,小数) |
| digits:true | 必须输入正数 |
| creditcard: | 必须输入合法的信用卡卡号 |
| equalTo:"#field" | 输入值必须和 #field 相同 |
| accept: | 输入拥有合法后缀名的字符串(上传文件的后缀) |
| maxlength:5 | 输入长度最多为5的字符串(汉字算1个字符串) |
| minlength:5 | 输入长度最少为5的字符串 |
| rangelength:[5:10] | 输入长度必须为5-10个字符串 |
| range[5:10] | 输入值必须为5-10之间 |
| max:5 | 输入值最大不能大于5 |
| min:5 | 输入值最小不能小于5 |
默认提示
messages: { required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a valid date ( ISO ).", number: "Please enter a valid number.", digits: "Please enter only digits.", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", maxlength: $.validator.format( "Please enter no more than {0} characters." ), minlength: $.validator.format( "Please enter at least {0} characters." ), rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ), range: $.validator.format( "Please enter a value between {0} and {1}." ), max: $.validator.format( "Please enter a value less than or equal to {0}." ), min: $.validator.format( "Please enter a value greater than or equal to {0}." ) }
jQuery Validate提供了中文信息提示包，位于下载包的 dist/localization/messages_zh.js，内容如下：
(function( factory ) { if ( typeof define === "function" && define.amd ) { define( ["jquery", "../jquery.validate"], factory ); } else { factory( jQuery ); } }(function( $ ) { /* * Translated default messages for the jQuery validation plugin. * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語) */ $.extend($.validator.messages, { required: "这是必填字段", remote: "请修正此字段", email: "请输入有效的电子邮件地址", url: "请输入有效的网址", date: "请输入有效的日期", dateISO: "请输入有效的日期 (YYYY-MM-DD)", number: "请输入有效的数字", digits: "只能输入数字", creditcard: "请输入有效的信用卡号码", equalTo: "你的输入不相同", extension: "请输入有效的后缀", maxlength: $.validator.format("最多可以输入 {0} 个字符"), minlength: $.validator.format("最少要输入 {0} 个字符"), rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"), range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"), max: $.validator.format("请输入不大于 {0} 的数值"), min: $.validator.format("请输入不小于 {0} 的数值") }); }));
你可以将该本地化信息文件 dist/localization/messages_zh.js 引入到页面：
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
使用方式
注意事项
- 标签中必须有
name的属性,是靠name取值的 - 加载时,必须jQuery在最上面,会报错
- 字体的颜色设置css时,需要
.error命名 - 需要jQuery1.11版本的
- 重置表单状态,需要使用
button按钮 - 清空表单使用
<input type='reset' />实现
例子
直接就写到一个例子当中了,注意看注释吧:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test2</title> <style> /* 错误信息CSS样式,名称为.error*/ .error{ color: red; } </style> </head> <body> <form action="/test2/" class="testform" id="testform"> <p> <label for="firstname">姓氏</label> <input type="text" name="firstname" id="firstname"> </p> <p> <label for="lastname">名字</label> <input type="text" name="lastname" id="lastname"> </p> <p> <label for="password">密码</label> <input type="password" name="password" id="password"> </p> <p> <label for="confirm_password">确认密码</label> <input type="password" name="confirm_password" > </p> {# <p><input type="password" name="xxx"></p>#} <p><label for="email">邮箱:</label><input type="text" name="email"></p> <p><label for="comment">备注:</label><textarea name="comment" id="comment" cols="30" rows="8"></textarea></p> <p><input type="submit" value="提交"></p> {# /* 清空表单可以直接使用reset的button */#} <p><input type="reset"></p> {# 重置表单状态#} <p><input type="button" value="清空表单" id="reset"></p> </form> {# ## jqure文件要首先导入#} <script src="/static/jquery.js"></script> <script src='/static/jquery.validate.js'></script> <script src='/static/messages_zh.js'></script> <script> $().ready(function () { var validator = $("#testform").validate({ rules:{ firstname:{required:true,minlength:5}, lastname:{required:true,minlength:5}, password:{required:true,minlength:6}, confirm_password:{required:true,minlength:6,equalTo:"#password"}, email:{required:true,email:true} }, messages:{ firstname:{required:'必须输入姓氏',minlength:'不能小于5个字符'}, lastname:{required:'必须输入名字',minlength:'不能小于5个字符'}, password:{required:'请输入密码',minlength:'密码至少6位'}, confirm_password:{required:'请确认密码',minlength:'密码至少6位',equalTo:'两次输入的密码不匹配'}, email:'请输入一个正确的邮箱地址' }, errorPlacement: function(error, element) { // 更改错误提示位置在输入框下面 // var p = $("<p />").append(error); // p.appendTo(element.parent()); // 位置默认在输入框右侧 error.appendTo(element.parent()); }, submitHandler:function(form) { var firstname = $('#firstname').val(); $.ajax({ url:'/test2/', type:'POST', dataType:'json', data:{'firstname':firstname}, success:function (data) { if(data.status){ alert(data.message) }else{ alert('failure') } } }) } }); // 需要将input的type设置为button,重置表单为提交前的状态 $('#reset').click(function () { validator.resetForm(); }); }); </script> </body> </html>
