前端之家收集整理的这篇文章主要介绍了
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类
}
});
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。