jQuery验证表单插件——jquery-validation
2016-09-25 15:09
344 查看
jQuery验证表单插件——jquery-validation
The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy.[align=right]——官方介绍[/align]
validation使用步骤
引入jQuery库和validation插件
如果需要官方的国际化提示信息,可以导入相应的messages_xx.js库文件。PS:下载地址:GitHub jzaefferer/jquery-validation
选中表单元素,显式调用验证方法
<script type="text/javascript"> $(function() { $("#form").validate(); }); </script>
书写验证规则和消息
<script type="text/javascript"> $(function() { $("#form").validate({ rules:{}, messages:{} }); }); </script>
rules规则语法
rules:{ 字段名:校验器, 字段名:校验器,... }
校验器语法
校验器:值, 校验器:值,...
messages提示语法
message:{ 字段名:{ 校验器:"提示", 校验器:"提示",... } 字段名:{ 校验器:"提示", 校验器:"提示",... } }
校验器取值
校验类型 | 取值 | 描述 |
---|---|---|
required | true|false | 必填字段 |
邮件地址 | ||
url | 统一资源定位符 | |
date | 数字 | 日期 |
dateISO | 字符串 | 日期(YYYY-MM-dd) |
number | 数字(负数,小数) | |
digits | 整数 | |
minlength | 数字 | 最小长度 |
maxlength | 数字 | 最大长度 |
rangelength | [minL,maxL] | 长度范围 |
min | 最小值 | |
max | 最大值 | |
range | [min,max] | 值范围 |
equalTo | jQuery表达式 | 两个值相同 |
remote | url路径 | ajax校验 |
案例
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script> <script type="text/javascript" src="../../js/jquery.validate.min.js" ></script> <script type="text/javascript" src="../../js/messages_zh.js" ></script> <script> $(function(){ $("#registForm").validate({ rules:{ user:{ required:true, minlength:2 }, password:{ required:true, digits:true, minlength:6 }, repassword:{ required:true, digits:true, minlength:6, equalTo:"[name='password']" }, email:{ required:true, email:true }, username:{ required:true, minlength:2 }, sex:{ required:true } }, messages:{ user:{ required:"用户名不能为空!", minlength:"用户名不得少于2个字符!" }, password:{ required:"密码不能为空!", digits:"密码必须是数字!", minlength:"密码长度不得低于6位!" }, repassword:{ required:"确认密码不能为空!", digits:"密码必须是数字!", minlength:"密码长度不得低于6位!", equalTo:"两次密码不一致!" }, email:{ required:"邮箱不能为空!", email:"邮箱格式不正确!" }, username:{ required:"姓名不能为空!", minlength:"姓名不得少于2个字符!" }, sex:{ required:"性别必须勾选!" } }, errorElement: "label", //用来创建错误提示信息标签 success: function(label) { //验证成功后的执行的回调函数 //label指向上面那个错误提示信息标签label label.text(" ") //清空错误提示消息 .addClass("success"); //加上自定义的success类 } }); }) </script>
相关文章推荐
- 开发者必知的20个jQuery插件——之二用jQuery-Validation-Engine对提交表单进行验证
- GBin1教程:使用jQuery插件jquery.validationEngine实现表单验证功能
- jQuery 表单验证插件 jQuery Validation Engine 使用
- jQuery表单验证插件 Validation for Bootstrap
- jQuery 表单验证插件 jQuery Validation Engine 使用
- GBin1教程:使用jQuery插件jquery.validationEngine实现表单验证功能
- jQuery插件Validation验证表单实现javascript表单智能验证功能
- jQuery Validation Plugin客户端表单验证插件(3)
- JQuery表单验证插件----validation
- 基于jquery 表单验证插件Validation的应用
- jQuery学习之:Validation表单验证插件
- jQuery学习之:Validation表单验证插件
- Validation-jQuery表单验证插件使用方法
- jQuery插件Validation验证表单实现javascript表单智能验证功能
- jQuery插件Validation验证表单实现javascript表单智能验证功能
- jQuery表单验证插件 Validation
- Validation 表单验证 插件 jQuery 验证 数字 日期 (一)
- jQuery学习之:Validation表单验证插件
- jquery 表单验证插件validation(国际化)的使用
- jQuery 表单验证插件 jQuery Validation Engine 使用