jquery validation验证表单插件
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. ——官方介绍
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:{ 字段名:{ 校验器:"提示", 校验器:"提示",... } 字段名:{ 校验器:"提示", 校验器:"提示",... } }
校验器取值
案例
<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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- jquery validation验证电话号码,email(实例代码)
- jQuery.Validate 使用笔记(jQuery Validation范例 )
- jQuery 表单验证插件formValidation实现个性化错误提示
- jQuery验证插件validation使用指南
- jQuery Validation实例代码 让验证变得如此容易
- jQuery Validation插件remote验证方式的Bug解决
- Jquery Validation插件防止重复提交表单的解决方法
- Jquery validation remote 验证的缓存问题解决方法
- jquery插件validation实现验证身份证号等
- 修改jQuery Validation里默认的验证方法
相关文章
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
这篇文章主要为大家详细介绍了解决jQuery上传插件Uploadify出现Http Error 302错误的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2015-12-12JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参(selected的值和页面其它元素的值)2011-01-01
最新评论