jquery validation验证表单插件

前端之家收集整理的这篇文章主要介绍了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:下载地址:

选中表单元素,显式调用验证方法

书写验证规则和消息

rules规则语法

校验器语法

messages提示语法

提示",校验器:"提示",... } 字段名:{ 校验器:"提示",... } }

校验器取值

案例

@H_502_49@ $(function(){ $("#registForm").validate({ rules:{ user:{ required:true,minlength:2 },password:{ required:true,digits:true,minlength:6 },repassword:{ required:true,minlength:6,equalTo:"[name='password']" },email:{ required:true,email:true },username:{ required:true,sex:{ required:true } },messages:{ user:{ required:"用户名不能为空!",minlength:"用户名不得少于2个字符!" },password:{ required:"密码不能为空!",digits:"密码必须是数字!",minlength:"密码长度不得低于6位!" },repassword:{ required:"确认密码不能为空!",minlength:"密码长度不得低于6位!",equalTo:"两次密码不一致!" },email:{ required:"邮箱不能为空!",email:"邮箱格式不正确!" },username:{ required:"姓名不能为空!",minlength:"姓名不得少于2个字符!" },sex:{ required:"性别必须勾选!" } },errorElement: "label",//用来创建错误提示信息标签 success: function(label) { //验证成功后的执行的回调函数 //label指向上面那个错误提示信息标签label label.text(" ") //清空错误提示消息 .addClass("success"); //加上自定义的success类 } }); })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的jQuery相关文章