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里默认的验证方法