步骤:
1, 要导入相应的jQuery.js与jquery.validate.js文件
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript">
2, 在相应的字段上指定验证规则
名称 *<input type="text" name="loginName" class="required">
其中class="required"代表本字段必须要输入数据
3, 指定要对表单进行验证
<script type="text/javascript">
$(function(){
$("#testForm").validate();
});
</script>
效果如下图:
1. 基础知识
1.1. 指定验证规则的方式
1.1.1. 把验证规则写到字段元素的class属性中
例:
名称 * <input type="text" name="loginName" class="required"><br>
密 * <input type="password" name="password" class="required"><br>
再次输入 <input type="password" name="password2"
class="{equalTo: '[name=password]'} required"><br>
生日 <input type="text" name="birthday" class="dateISO"><br>
E-mail *<input type="text" name="email" class="email"><br>
PAR(zip)<input type="file" name="resource" class="{accept: 'zip'}">
说明:
1,如果使用class="{}"的方式,必须引入包:jquery.metadata.js
1.1.2. 调用validate()方法时传递字段的验证规则
$(function() {
$("#testForm").validate({
rules: {
loginName:{
required: true,
min: 2
} ,
password: {
required: true
},
password2: {
equalTo: "input[name=password]"
}
}
});
});
1.2. 内置的验证规则
required:true 必输字段
remote:"check.php" 使用ajax方法调用check.php验证输入值
email:true 必须输入正确格式的电子邮件
url:true 必须输入正确格式的网址
date:true 必须输入正确格式的日期
dateISO:true 必须输入正确格式的日期(ISO),例如:2010-01-01,2010/01/01 只验证格式,不验证有效性
number:true 必须输入合法的数字(负数,小数)
digits:true 必须输入整数
creditcard: 必须输入合法的信用卡号
equalTo:"#field" 输入值必须和#field相同
accept: "gif|png|jpg" 输入拥有合法后缀名的字符串(上传文件的后缀),多个后缀之间用’|’隔开
maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
minlength:10 输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10] 输入值必须介于 5 和 10 之间
max:5 输入值不能大于5
min:10 输入值不能小于10
说明:
1, remote是远程验证:比如注册验证用户名是否已被注册,返回值只能是true(验证成功)或false(验证失败)。
2, 某些属性值中的引号不能省略,否则出错。如accept、equalTo等。
1.3. 自定义验证规则
除了内置的验证规则,validation还允许自定义验证规则。这是通过validation的addMethod()方法实现的,语法 为:
jQuery.validator.addMethod("name",function,message)
其中:
1, name为验证规则的名称
2, function定义验证的规则。参数有?。返回值为?。
3, message是验证失败时的提示信息。
1.4. 指定错误提示内容
1.4.1. 更改默认的提示内容
jQuery.extend(jQuery.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"),
minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"),
rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"),
range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")
相关推荐
jquery validate 验证手册
NULL 博文链接:https://a-alter.iteye.com/blog/1149470
jquery validate验证示例各种验证 齐全包含jquery需要用的js文件
jquery validate验证详细解答
jQuery validate 验证 个性化验证
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)_.docx
非常好的Jquery validate:每个案例独立,都有注释 讲解了: 环境搭建 常见验证方法配置 国际化错误消息 自定义方法和远程验证 给验证添加 图标效果
jquery.validate是一个基于jquery的非常优秀的验证框架,我们可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,而且对国际化也有非常好的支持。
刚刚研究了jqueryvalidate表单验证插件, 加了一些样式,出错提示和验证通过的提示,通过ajaxSubmit()异步提交表单 对input select 标签进行了简单美化。样式全是自己写的,不是网上照抄 适合初学jqueryvalidate, ...
只验证格式,不验证有效性。 7 number:true 必须输入合法的数字(负数,小数)。 8 digits:true 必须输入整数。 9 creditcard: 必须输入合法的信用卡号。 10 equalTo:"#field" 输入值必须和 #field 相同。 11 accept...
自做的一个简单的表单验证 jquery validate 表单验证 jquery validate 表单验证
jQuery validate验证,新赠员工时判断输入的用户名是存在(可更改成注册用户时,判断该邮箱是否使用,更改个人信息时,用户名是否存在,原密码是否正确) 两次密码的验证,邮箱、身份证号的验证 ,功能很强大,值得...
NULL 博文链接:https://wwwzhouhui.iteye.com/blog/1068451
用的是jquery的validate验证表单插件,资源都给好了,可以直接使用
解决jquery validate remote 只验证一次的问题
jQuery.validate验证,很全面的文档。
jquery validate表单验证插件制作注册表单提交验证 jquery validate表单验证插件制作注册表单提交验证
主要为大家详细介绍了CKEditor无法验证的解决方案和jQuery Validate验证框架,感兴趣的小伙伴们可以参考一下
jQuery Validate插件验证表单小练。
Jquery validate表单验证Demo.zip Jquery validate表单验证Demo.zip Jquery validate表单验证Demo.zip Jquery validate表单验证Demo.zip Jquery validate表单验证Demo.zip