jquery-validator中js校验及标签校验的使用
jquery-validator中js校验及标签校验的使用:
1.项目中引入jquery.validate.js 官方网站:http://bassistance.de/ http://jqueryvalidation.org/
2.js校验方式(自定义规则校验,扩展校验):
js有默认的校验规则如:required、email、number等,下面是自定义新的校验规则:
//证件号码
jQuery.validator.addMethod("number", function(value, element){
return this.optional(element) ||/^[a-zA-Z0-9]+$/.test(value);
}, ""); //number表示新增方法的方法名
//邮编
jQuery.validator.addMethod("Postcode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "");
//登录密码
jQuery.validator.addMethod("password", function(value, element){
return this.optional(element) ||/^[a-zA-Z0-9]+$/.test(value);
}, "");
//理顾工号
jQuery.validator.addMethod("jobnumber", function(value, element){
return this.optional(element) ||/^[H][0-9]+$/.test(value);
}, "");
//手机号码
jQuery.validator.addMethod("basicnum", function(value, element){
return this.optional(element) ||regMobile.test(value);
}, ""); //表单序列化
$("#formId").validate({
ignore: "hidden",//验证属性为hidden的元素
submitHandler: function() {
//验证通过后 的js代码写在这里
},
rules: {
number: { //密码2的描述多于1项使用对象类型
number: true //使用自定义的验证规则,在上例中新增的部分
},
Postcode:{ //标签的name值
Postcode:true //方法名
},
password:{
password:true
},
jobnumber:{
jobnumber:true
},
basicnum:{
basicnum:true
} },
messages: {
number: {
number: "证件号码只能是数字、字母"
},
Postcode: {
Postcode: "请正确填写您的邮政编码"
},
password: {
password: "密码只能是数字、字母"
},
jobnumber: {
jobnumber: "只能是H+6位数字的格式,例如'H002200'"
},
basicnum: {
basicnum: "请输入正确的手机号"
}
}
})
3.标签校验及js校验(两种校验方式):
一、默认验证规则
required:true | 必须填写 |
remote:”check.php” | 使用ajax方法调用check.php验证输入值(check.php返回true或false字符串) |
email:true | 必须输入有效的电子邮件 |
url:true | 必须输入有效的网址 |
date:true | 必须入有效的日期 |
dateISO:true | 必须入有效的日期 (YYYY-MM-DD),例如:2014-06-25,1998/06/09 只验证格式,不验证有效性 |
number:true | 必须输入正确的数字(负数,小数) |
digits:true | 只可输入数字 |
creditcard:true | 必须输入有效的信用卡号码 |
equalTo:”#field” | 必须输入和#field相同的值 |
extension | 必须输入有效的后缀 |
maxlength:10 | 输入长度最多 10 个字符串(汉字算一个字符) |
minlength:5 | 输入长度最少 5 个字符串(汉字算一个字符) |
rangelength:[5,10] | 输入长度为必须介于 5 至 10 之间的字符串(汉字算一个字符) |
range:[5,10] | 输入数值必须介于 5 至 10 之间 |
max:10 | 输入数值不能大于 10 |
min:5 | 输入数值不能小于 5 |
二、默认的提示
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date ( ISO ).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
maxlength: $.validator.format( "Please enter no more than {0} characters." ),
minlength: $.validator.format( "Please enter at least {0} characters." ),
rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
range: $.validator.format( "Please enter a value between {0} and {1}." ),
max: $.validator.format( "Please enter a value less than or equal to {0}." ),
min: $.validator.format( "Please enter a value greater than or equal to {0}." )
},
可以使用中文的提示,引入messages_zh.js(在src/localization目录中)
觉得麻烦,一次要引入两个js,可以拿中文的提示覆盖jquery.validate.js中的英文提示(反正我会这么干,毕竟多数情况都中文的),如下:
messages: {
required: "必须填写",
remote: "请修正此栏位",
email: "请输入有效的电子邮件",
url: "请输入有效的网址",
date: "请输入有效的日期",
dateISO: "请输入有效的日期 (YYYY-MM-DD)",
number: "请输入正确的数字",
digits: "只可输入数字",
creditcard: "请输入有效的信用卡号码",
equalTo: "你的输入不相同",
extension: "请输入有效的后缀",
maxlength: $.validator.format("最多 {0} 个字"),
minlength: $.validator.format("最少 {0} 个字"),
rangelength: $.validator.format("请输入长度为 {0} 至 {1} 之間的字串"),
range: $.validator.format("请输入 {0} 至 {1} 之间的数值"),
max: $.validator.format("请输入不大于 {0} 的数值"),
min: $.validator.format("请输入不小于 {0} 的数值")
},
三、使用方式(两种)
1.将校验规则写到控件中
看了之前的别人写的文章,貌似是依赖jquery.metadata.js这个库,然后写的时候以 class=”required email” 这样的形式来写,这样写起来好像有些乱,class本身是呈现样式的,现在被附上各种校验的规则,看上去似乎有些乱,不过好在新版本中,又有了新的写法,不依赖上面的js库,以 data-rule-验证规则、data-msg-提示信息 这样的格式来重新定义,更简单,更直观,更强大了。
<script src="../js/jquery.js"></script>
<script src="../js/jquery.validate.js"></script>
<script>
$().ready(function() {
$("#registerForm").validate();
});
</script> <form id="registerForm" method="get" action="">
<fieldset>
<p>
<label for="cusername">用户名</label>
<input id="cusername" name="username" type="text" data-rule-required="true" data-rule-rangelength="[2,10]" data-msg-required="用户名不能为空" data-msg-rangelength="用户名长度必须是2到10个字符">
</p>
<p>
<label for="cpassword">密码</label>
<input id="cpassword" name="password" type="password" data-rule-required="true" data-rule-minlength="6" data-msg-required="密码不能为空" data-msg-minlength="至少设置6位密码">
</p>
<p>
<label for="cconfirmpassword">确认密码</label>
<input id="cconfirmpassword" name="confirmpassword" type="password" data-rule-equalTo="#cpassword" data-msg-equalTo="两次密码不一致">
</p>
<p>
<label for="cemail">邮箱</label>
<input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="邮箱不能为空" data-msg-email="邮箱的格式不正确">
</input>
</p>
<p>
<label for="chasreferee">有推荐人请勾选</label>
<input type="checkbox" id="chasreferee" name="hasreferee">
</p>
<p>
<label for="creferee">推荐人</label>
<input id="creferee" name="referee" data-rule-required="#chasreferee:checked" data-msg-required="推荐人不能为空">
</input>
</p>
<p>
<input type="submit" value="提交">
</p>
</fieldset>
</form>
2.将校验规则写到代码中
个人感觉第一种写法,更适合做软件开发或是网站后台,而第二种写法更适合做网站的前台,对页面加载速度有苛刻的要求的时候,可以把脚本代码封装成一个单独的js,以提高网页的加载速度。
<script src="../js/jquery.js"></script>
<script src="../js/jquery.validate.js"></script>
<script>
$().ready(function() {
$("#registerForm").validate({ rules: {
username: {
required: true,
rangelength: [2, 20]
},
password: {
required: true,
minlength: 6
},
confirmpassword: {
equalTo: "#cpassword"
},
email: {
required: true,
email: true
},
referee: {
required: "#chasreferee:checked"
} },
messages: {
username: {
required: "用户名不能为空",
rangelength: "用户名长度必须是2到10个字符"
},
password: {
required: "密码不能为空",
minlength: "至少设置6位密码"
},
confirmpassword: {
equalTo: "两次密码不一致"
},
email: {
required: "邮箱不能为空",
email: "邮箱的格式不正确"
},
referee: {
required: "推荐人不能为空"
}
} });
});
</script> <form id="registerForm" method="get" action="">
<fieldset>
<p>
<label for="cusername">用户名</label>
<input id="cusername" name="username" type="text">
</p>
<p>
<label for="cpassword">密码</label>
<input id="cpassword" name="password" type="password">
</p>
<p>
<label for="cconfirmpassword">确认密码</label>
<input id="cconfirmpassword" name="confirmpassword" type="password">
</p>
<p>
<label for="cemail">邮箱</label>
<input id="cemail" name="email">
</input>
</p>
<p>
<label for="chasreferee">有推荐人请勾选</label>
<input type="checkbox" id="chasreferee" name="hasreferee">
</p>
<p>
<label for="creferee">推荐人</label>
<input id="creferee" name="referee">
</input>
</p>
<p>
<input type="submit" value="提交">
</p>
</fieldset>
</form>
四、常用方法及注意事项
1.用其他方式替代默认的SUBMIT(此种方法可以解决编辑内容时,所有内容验证通过表单不提交的问题)
$("#registerForm").validate({
submitHandler:function(form){
form.submit();
}
});
也可以设置validate的默认值
$.validator.setDefaults({
submitHandler: function (form) {
form.submit();
}
});
2.debug,如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便
$("#registerForm").validate({
debug:true
});
或者
$.validator.setDefaults({
debug: true
})
3.ignore:忽略某些元素不验证(默认情况是忽略:hidden及隐藏的元素不进行验证)
$.validator.setDefaults({
ignore: ".ignore"
})
4.errorPlacement:指定错误信息存放的位置
有一组复选框或单选框的情况,将错误信息的位置,存放在一组元素最后,如下:
$("#registerForm").validate({
errorPlacement: function (error, element) { //指定错误信息位置
if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox
var eid = element.attr('name'); //获取元素的name属性
error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面
} else {
error.insertAfter(element);
}
}
});
原文:jquery.validate使用说明及注意事项:http://www.shouce123.com/archives/180.html
jquery-validator中js校验及标签校验的使用的更多相关文章
- 在html代码中js的script标签建议放在那里?
今天编写了一个简单的js代码,F12有错误,然后发现是<script>放的位置有问题.之前在我的印象当中,说的是这个标签放在哪里都可以,然而...并不是这样的,例如我现在练习的这个代码,写 ...
- jquery.nestable.min.js可拖动标签
主容器为一个叫div的classname为dd的东西. 只要对这个主容器进行捕获加上一个方法 nestable就可以了. 可以给的属性为 serialize 直接以字符串的形式给入,意思就是按 ...
- jquery.validate中使用remote,remote相同值不校验问题解决
jquery.validate中使用remote, remote相同值不校验问题解决 >>>>>>>>>>>>>>& ...
- HashTab---Windows资源管理器的文件属性窗口中添加了一个叫做”文件校验”的标签
HashTab 是一个优秀的 Windows 外壳扩展程序,它在 Windows 资源管理器的文件属性窗口中添加了一个叫做”文件校验”的标签.该标签可以帮助你方便地计算文件的 MD5.SHA1 与 C ...
- SSM-SpringMVC-31:SpringMVC中利用hibernate-validator做后台校验
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 校验有三种:前台页面校验(例如js和h5),后台校验,数据库校验 但是一般能不用数据库校验就不用数据库校验,因 ...
- struts2:数据校验,通过Action中的validate()方法实现校验,图解
根据输入校验的处理场所的不同,可以将输入校验分为客户端校验和服务器端校验两种.服务器端验证目前有两种方式: 第一种 Struts2中提供了一个com.opensymphony.xwork2.Valid ...
- jQuery 表单验证 jquery.validator.js
前端开发中经常会碰到表单的制作,其中必备的功能就是提交前的一些简单的验证,非空啊.手机号码啊.E-mail等等等等,这里是一个 jQuery 的表单验证插件,蛮好用的,收录一下. 下面是验证的效果图: ...
- JQuery中两个ul标签的li互相移动实现方法
这篇文章主要介绍了JQuery中两个ul标签的li互相移动实现方法,可实现ul标签中li标签内容相互替换的技巧,涉及jQuery操作页面元素的相关技巧,需要的朋友可以参考下 本文实例讲述了JQuery ...
- 使用JS或jQuery模拟鼠标点击a标签事件代码
原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...
随机推荐
- POJ 3664 Election Time 题解
这道题网上非常多人都会说easy,水题之类的话,只是我看了下说这种话的人的程序,能够说他们的程序都不及格! 为什么呢?由于他们的程序都是使用简单的二次排序水过(大概你能搜索到的多是这种程序).那样自然 ...
- windows编译ffmpeg出现gcc is unable to create an executable file 的普通情况
近期有个朋友在编译ffmpeg的时候出现这个问题,他非常郁闷. 我就说,为什么我弄的时候就没问题呢??直接./configure +加上后面的參数 安全度过. 然后,我就想了,预计他的gcc的系统变量 ...
- 【Bootstrap】一个PC、平板、手机同一时候使用并且美观的登陆页面
Bootstrap如同前台框架,它已经布置好不少的CSS.前端开发的使用须要则直接调用就可以.其站点的网址就是http://www.bootcss.com.使用Bootstrap能降低前端开发时候在C ...
- 【iOS开发-54】案例学习:通过UIScrollView的缩放图片功能练习代理模式的详细实现
案例:(在模拟器中按住option键,点击鼠标就会出现缩放的手势) (1)在ViewController.m中: --缩放东西是UIScrollView除了滚动之外的还有一个功能,所以须要缩放的东西应 ...
- BZOJ 1007: [HNOI2008]水平可见直线 平面直线
1007: [HNOI2008]水平可见直线 Description 在xoy直角坐标平面上有n条直线L1,L2,...Ln,若在y值为正无穷大处往下看,能见到Li的某个子线段,则称Li为可见的,否则 ...
- [JZOJ 5465] [NOIP2017提高A组冲刺11.9] 道路重建 解题报告 (e-dcc+树的直径)
题目链接: http://172.16.0.132/senior/#main/show/5465 题目: 小X所居住的X国共有n个城市,有m条无向道路将其连接.作为一个统一的国家,X 城的任意两个城市 ...
- @Query Annotation in Spring Data JPA--转
原文地址:http://javabeat.net/spring-data-jpa-query/ In my previous post on Spring Data, I have explained ...
- C++之虚函数表
本文引自:http://songlee24.github.io/blog/2014/09/02/c-plus-plus-jin-jie-zhi-xu-han-shu-biao/ C++通过继承(inh ...
- css3 字体、2D转换、3D转换
学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...
- (转载)10个实用的但偏执的Java编程技术
10个实用的但偏执的Java编程技术 在沉浸于编码一段时间以后(比如说我已经投入近20年左右的时间在程序上了),你会渐渐对这些东西习以为常.因为,你知道的…… 作者:小峰来源:码农网|2015-09- ...