validate 扩展js

  1. $.extend($.fn.validatebox.defaults.rules, {
  2.     equals: {
  3.         validator: function(value,param){
  4.             return value == $(param[0]).val();
  5.         },
  6.         message: '两次输入内容不一致'
  7.     },
  8. 	minLength: {
  9.         validator: function(value, param){
  10.             return value.length >= param[0];
  11.         },
  12.         message: 'Please enter at least {0} characters.'
  13.     },
  14. 	//手机号码
  15. 	mobile: {
  16. 		validator: function(value, param){
  17. 			return /^0{0,1}1[3,8,5][0-9]{9}$/.test(value);
  18. 		},
  19. 		message: "手机号码格式不正确"
  20. 	},
  21. 	//身份证
  22. 	IDCard: {
  23. 		validator: function(value, param){
  24. 			return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);
  25. 		},
  26. 		message: "请输入正确的身份证号码"
  27. 	},
  28. 	//比较时间选择器
  29. 	compareDate: {
  30. 		validator: function(value, param){
  31. 			return dateCompare($(param[0]).datebox("getValue"), value);
  32. 		},
  33. 		message: "结束日期不能小于开始日期"
  34. 	},
  35. 	// 验证是否包含空格和非法字符
  36.     unnormal: {
  37.         validator: function (value) {
  38.             return /^[a-zA-Z0-9]/i.test(value);
  39.  
  40.         },
  41.         message: '输入值不能为空和包含其他非法字符'
  42.     },
  43.     //过滤特殊字符
  44.     filterSpecial:{
  45.         validator: function(value, param){
  46.  
  47.             //过滤空格
  48.             var flag = /\s/.test(value);
  49.             //过滤特殊字符串
  50.             var pattern  = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】’‘《》；：”“'。，、？]");
  51.             var specialFlag = pattern.test(value);
  52.                 return !flag && !specialFlag;
  53.         },
  54.         message: "非法字符，请重新输入"
  55.     },
  56. 	checkNum: {
  57. 		validator: function(value, param) {
  58. 			return /^([0-9]+)$/.test(value);
  59. 		},
  60. 		message: '请输入整数'
  61. 	},
  62. 	checkFloat: {
  63. 		validator: function(value, param) {
  64. 			return /^[+|-]?([0-9]+\.[0-9]+)|[0-9]+$/.test(value);
  65. 		},
  66. 		message: '请输入合法数字'
  67. 	},
  68.     length:{validator:function(value,param){
  69. 		var len=$.trim(value).length;
  70. 		return len>=param[0]&&len<=param[1];
  71. 	},
  72. 		message:"输入内容长度必须介于{0}和{1}之间."
  73. 	},
  74.     phone : {// 验证电话号码
  75.         validator : function(value) {
  76.             return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
  77.         },
  78.         message : '格式不正确,请使用下面格式:020-88888888'
  79.     },
  80.     intOrFloat : {// 验证整数或小数
  81.         validator : function(value) {
  82.             return /^\d+(\.\d+)?$/i.test(value);
  83.         },
  84.         message : '请输入数字，并确保格式正确'
  85.     },
  86.     qq : {// 验证QQ,从10000开始
  87.         validator : function(value) {
  88.             return /^[1-9]\d{5,9}$/i.test(value);
  89.         },
  90.         message : 'QQ号码格式不正确'
  91.     },
  92.     age : {// 验证年龄
  93.         validator : function(value) {
  94.             return /^(?:[1-9][0-9]?|1[01][0-9]|120)$/i.test(value);
  95.         },
  96.         message : '年龄必须是0到120之间的整数'
  97.     },
  98.  
  99.     chinese : {// 验证中文
  100.         validator : function(value) {
  101.             return /^[\Α-\￥]+$/i.test(value);
  102.         },
  103.         message : '请输入中文'
  104.     },
  105.     english : {// 验证英语
  106.         validator : function(value) {
  107.             return /^[A-Za-z]+$/i.test(value);
  108.         },
  109.         message : '请输入英文'
  110.     },
  111.     username : {// 验证用户名
  112.         validator : function(value) {
  113.             return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);
  114.         },
  115.         message : '用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）'
  116.     },
  117.     faxno : {// 验证传真
  118.         validator : function(value) {
  119. //            return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/i.test(value);
  120.             return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
  121.         },
  122.         message : '传真号码不正确'
  123.     },
  124.     zip : {// 验证邮政编码
  125.         validator : function(value) {
  126.             return /^[1-9]\d{5}$/i.test(value);
  127.         },
  128.         message : '邮政编码格式不正确'
  129.     },
  130.     ip : {// 验证IP地址
  131.         validator : function(value) {
  132.             return /^((([01]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))[.]){3}(([0-1]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))$/i.test(value);
  133.         },
  134.         message : 'IP地址格式不正确'
  135.     },
  136.     name : {// 验证姓名，可以是中文或英文
  137.             validator : function(value) {
  138.                 return /^[\Α-\￥]+$/i.test(value)|/^\w+[\w\s]+\w+$/i.test(value);
  139.             },
  140.             message : '请输入中文或英文的姓名'
  141.     },
  142.     date : {// 输入合适的日期格式 yyyy-MM-dd或yyyy-M-d
  143.         validator : function(value) {
  144.          //格式yyyy-MM-dd或yyyy-M-d
  145.             return /^(?:(?!0000)[0-9]{4}([-]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-]?)0?2\2(?:29))$/i.test(value);
  146.         },
  147.         message : '清输入合适的日期格式'
  148.     }
  149. });
  150.  
  151. /*
  152.  * 比较两个日期的大小
  153.  * 传入的参数推荐是"yyyy-mm-dd"的格式，其他的日期格式也可以，但要保证一致
  154.  */
  155. var dateCompare = function(date1, date2){
  156. 	if(date1 && date2){
  157. 		var a = new Date(date1);
  158. 		var b = new Date(date2);
  159. 		return a < b;
  160. 	}
  161. }

用例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Validate On Blur - jQuery EasyUI Demo</title>
  6. 	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  7. 	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
  8. 	<link rel="stylesheet" type="text/css" href="../demo.css">
  9. 	<script type="text/javascript" src="../../jquery.min.js"></script>
  10. 	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
  11. 	<script type="text/javascript" src="../../jquery.easyui.validation.js"></script>
  12. </head>
  13. <body>
  14. 	<center>
  15. 	<h2 id="top">Validate</h2>
  16. 	<div style="margin:20px 0;"></div>
  17. 	<div class="easyui-panel" title="常用" style="width:100%;max-width:400px;padding:30px 60px;">
  18. 		<div style="margin-bottom:20px">
  19. 			<label for="username" class="label-top">长度范围限制（3-10）</label>
  20. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'length[3,10]',validateOnCreate:false,validateOnBlur:true,err:err">
  21. 		</div>
  22. 		<div style="margin-bottom:20px">
  23. 			<label for="email" class="label-top">Email格式验证</label>
  24. 			<input id="email" class="easyui-validatebox tb" data-options="required:true,validType:'email',validateOnCreate:false,validateOnBlur:true,tipPosition:'left'">
  25. 		</div>
  26. 		<div style="margin-bottom:20px">
  27. 			<label for="url" class="label-top">Url格式验证</label>
  28. 			<input id="url" class="easyui-validatebox tb" data-options="required:true,validType:'url',validateOnCreate:false,validateOnBlur:true" tipPosition="right">
  29. 		</div>
  30. 		<div style="margin-bottom:20px">
  31. 			<label for="phone" class="label-top">密码:</label>
  32. 			<input id="phone" class="easyui-passwordbox" prompt="Password" data-options="required:true,validateOnCreate:false,validateOnBlur:true" tipPosition="top">
  33. 		</div>
  34. 		<div style="margin-bottom:20px">
  35. 			<label for="phone" class="label-top">确认密码:</label>
  36. 			<input id="rephone" class="easyui-passwordbox" prompt="RePassword" data-options="required:true,validateOnCreate:false,validateOnBlur:true" validType="equals['#phone']" tipPosition="bottom">
  37. 		</div>
  38. 		<div style="margin-bottom:20px">
  39. 			<label for="username" class="label-top">限制最小长度5个字符:</label>
  40. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validateOnCreate:false,validateOnBlur:true" validType='minLength[5]'>
  41. 		</div>
  42. 		<div style="margin-bottom:20px">
  43. 			<label for="username" class="label-top">手机号码:</label>
  44. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'mobile',validateOnCreate:false,validateOnBlur:true,err:err">
  45. 		</div>
  46. 		<div style="margin-bottom:20px">
  47. 			<label for="username" class="label-top">身份证号:</label>
  48. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'IDCard',validateOnCreate:false,validateOnBlur:true,err:err">
  49. 		</div>
  50. 	</div>
  51. 	<div style="margin:20px 0;"></div>
  52. 	<div class="easyui-panel" title="数字" style="width:100%;max-width:400px;padding:30px 60px;">
  53. 		<div style="margin-bottom:20px">
  54. 			<label for="username" class="label-top">输入整数:</label>
  55. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'checkNum',validateOnCreate:false,validateOnBlur:true">
  56. 		</div>
  57. 		<div style="margin-bottom:20px">
  58. 			<label for="username" class="label-top">合法数字:</label>
  59. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'checkFloat',validateOnCreate:false,validateOnBlur:true">
  60. 		</div>
  61. 		<div style="margin-bottom:20px">
  62. 			<label for="username" class="label-top">验证电话号码:</label>
  63. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'phone',validateOnCreate:false,validateOnBlur:true">
  64. 		</div>
  65. 		<div style="margin-bottom:20px">
  66. 			<label for="username" class="label-top">验证整数或小数 :</label>
  67. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'intOrFloat',validateOnCreate:false,validateOnBlur:true">
  68. 		</div>
  69. 		<div style="margin-bottom:20px">
  70. 			<label for="username" class="label-top">验证QQ,从10000开始:</label>
  71. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'qq',validateOnCreate:false,validateOnBlur:true">
  72. 		</div>
  73. 		<div style="margin-bottom:20px">
  74. 			<label for="username" class="label-top">验证年龄:</label>
  75. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'age',validateOnCreate:false,validateOnBlur:true">
  76. 		</div>
  77. 	</div>
  78. 	<div style="margin:20px 0;"></div>
  79. 	<div class="easyui-panel" title="字符串" style="width:100%;max-width:400px;padding:30px 60px;">
  80. 		<div style="margin-bottom:20px">
  81. 			<label for="username" class="label-top">输入内容长度必须介于{0}和{1}之间:</label>
  82. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'length[2,4]',validateOnCreate:false,validateOnBlur:true">
  83. 		</div>
  84. 		<div style="margin-bottom:20px">
  85. 			<label for="username" class="label-top">验证是否包含空格和非法字符:</label>
  86. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'unnormal',validateOnCreate:false,validateOnBlur:true">
  87. 		</div>
  88. 		<div style="margin-bottom:20px">
  89. 			<label for="username" class="label-top">过滤特殊字符:</label>
  90. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'filterSpecial',validateOnCreate:false,validateOnBlur:true">
  91. 		</div>
  92. 		<div style="margin-bottom:20px">
  93. 			<label for="username" class="label-top">验证中文:</label>
  94. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'chinese',validateOnCreate:false,validateOnBlur:true">
  95. 		</div>
  96. 		<div style="margin-bottom:20px">
  97. 			<label for="username" class="label-top">验证英语 :</label>
  98. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'english',validateOnCreate:false,validateOnBlur:true">
  99. 		</div>
  100. 		<div style="margin-bottom:20px">
  101. 			<label for="username" class="label-top">用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）:</label>
  102. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'username',validateOnCreate:false,validateOnBlur:true">
  103. 		</div>
  104. 		<div style="margin-bottom:20px">
  105. 			<label for="username" class="label-top">验证姓名，可以是中文或英文  :</label>
  106. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'name',validateOnCreate:false,validateOnBlur:true">
  107. 		</div>
  108. 		<div style="margin-bottom:20px">
  109. 			<label for="username" class="label-top">验证传真 3-4位数字'-'7-8位数字或7-8位数字（519-85125379或85125379）:</label>
  110. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'faxno',validateOnCreate:false,validateOnBlur:true">
  111. 		</div>
  112. 		<div style="margin-bottom:20px">
  113. 			<label for="username" class="label-top">验证邮政编码（非0开头6位数字）:</label>
  114. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'zip',validateOnCreate:false,validateOnBlur:true">
  115. 		</div>
  116. 		<div style="margin-bottom:20px">
  117. 			<label for="username" class="label-top">验证IP地址 :</label>
  118. 			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'ip',validateOnCreate:false,validateOnBlur:true">
  119. 		</div>
  120. 	</div>
  121. 	<div style="margin:20px 0;"></div>
  122. 	<div class="easyui-panel" title="日期" style="width:100%;max-width:400px;padding:30px 60px;">
  123. 		<div style="margin-bottom:20px">
  124. 			<label for="username" class="label-top">输入合适的日期格式 yyyy-MM-dd :</label>
  125. 			<input id="username" style="width:100%;" class="easyui-datebox tb" data-options="required:true,validType:'date',validateOnCreate:false,validateOnBlur:true,formatter:myformatter,parser:myparser">
  126. 		</div>
  127. 		<div style="margin-bottom:20px">
  128. 			<label for="username"  class="label-top">结束日期不能小于开始日期:</label>
  129. 			<input id="date1" style="width:100%;" class="easyui-datebox tb " data-options="required:true,validateOnCreate:false,validateOnBlur:true,formatter:myformatter,parser:myparser">
  130. 		</div>
  131. 		<div style="margin-bottom:20px">
  132. 			<label for="username" class="label-top">结束日期不能小于开始日期:</label>
  133. 			<input id="date2" style="width:100%;" class="easyui-datebox tb " data-options="required:true,validateOnCreate:false,validateOnBlur:true,formatter:myformatter,parser:myparser" validType="compareDate['#date1']">
  134. 		</div>
  135. 	</div>
  136. 	<a href="#top"><img src="top.gif" style="position: fixed;right: 30px;bottom: 20px;" width="20" height="30"/></a>
  137. 	<style scoped="scoped">
  138. 		.tb{
  139. 			width:100%;
  140. 			margin:0;
  141. 			padding:5px 4px;
  142. 			border:1px solid #ccc;
  143. 			box-sizing:border-box;
  144. 		}
  145. 	</style>
  146. 	<!-- 设置错误提示显示在下方 -->
  147. 	<script type="text/javascript">
  148. 		function err(target, message){
  149. 			var t = $(target);
  150. 			if (t.hasClass('textbox-text')){
  151. 				t = t.parent();
  152. 			}
  153. 			var m = t.next('.error-message');
  154. 			if (!m.length){
  155. 				m = $('<div class="error-message"></div>').insertAfter(t);
  156. 			}
  157. 			m.html(message);
  158. 		}
  159. 		function myformatter(date){
  160. 			var y = date.getFullYear();
  161. 			var m = date.getMonth()+1;
  162. 			var d = date.getDate();
  163. 			return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
  164. 		}
  165. 		function myparser(s){
  166. 			if (!s) return new Date();
  167. 			var ss = (s.split('-'));
  168. 			var y = parseInt(ss[0],10);
  169. 			var m = parseInt(ss[1],10);
  170. 			var d = parseInt(ss[2],10);
  171. 			if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
  172. 				return new Date(y,m-1,d);
  173. 			} else {
  174. 				return new Date();
  175. 			}
  176. 		}
  177. 	</script>
  178. </center>
  179. </body>
  180. </html>

　　

JQuery EasyUI validate 扩展的更多相关文章

  1. Jquery Easyui验证扩展，Easyui验证，Easyui校验，js正则表达式

    Jquery Easyui验证扩展,Easyui验证,Easyui校验,js正则表达式 >>>>>>>>>>>>>> ...

  2. jquery easyui的扩展验证

    1.扩展通过$.extends($.fn.validatebox.defaults.rules,)扩展 $.extend( $.fn.validatebox.defaults.rules, { idc ...

  3. 封装jQuery Validate扩展验证方法

    一.封装自定义验证方法-validate-methods.js /***************************************************************** j ...

  4. [转]jQuery EasyUI 扩展-- 主题（Themes）

    主题(Themes)允许您改变站点的外观和感观.使用主题可以节省设计的时间,让您腾出更多的时间进行开发.您也可以创建一个已有主题的子主题. 主题生成器(Theme Builder) jQuery UI ...

  5. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  6. jquery validate扩展验证方法

    /***************************************************************** jQuery Validate扩展验证方法 (linjq) *** ...

  7. 雷林鹏分享：jQuery EasyUI 数据网格 - 扩展编辑器

    jQuery EasyUI 数据网格 - 扩展编辑器 一些常见的编辑器(editor)添加到数据网格(datagrid),以便用户编辑数据. 所有的编辑器(editor)都定义在 $.fn.datag ...

  8. 雷林鹏分享：jQuery EasyUI 扩展

    jQuery EasyUI 扩展 Portal(制作图表.列表.球形图等) 数据网格视图(DataGrid View) 可编辑的数据网格(Editable DataGrid) 可编辑的树(Editab ...

  9. easyui validate -- radio、checkbox 校验扩展，事件域名

    事件域名: $(dom).on('click.myNameSpace',function(){ ... }),其中‘.myNameSpace’便是域名: 目前作用:$(dom).off('click. ...

随机推荐

  1. JAVA中int与String类型的相互转换

    Java的int和String类型间互相转换,小功能但是经常用到,下面是几种实现的方法: 字符串类型String转换成整数int 1. int i = Integer.parseInt([String ...

  2. Webpack探索【8】--- 模块热替换详解

    本文主要讲模块热替换相关内容.

  3. mybatis 各组件生命周期

    1.SqlSessionFactoryBuilder SqlSessionFactoryBuilder是通过利用XML或者java编码来获取Configuration配置来构建SqlSessionFa ...

  4. Java实参和形参与传值和传引用

    实参和形参的定义: 形参出现函数定义中,在整个函数体内都可以使用,离开函数则不能使用. 实参出现在主函数中,进入被调函数后,实参变量也不能使用. 形参和实参的功能是做数据传送.发生函数调用时,主调函数 ...

  5. JSP&Servlet(转)

    第一篇:Web应用基础1.概念:  1.1应用程序分类     a.桌面应用程序:一般是指采用client/server即客户机/服务器结构的应用程序.     b.web应用程序:一般是指采用Bro ...

  6. 3D 图片播放焦点图插件Adaptor

    在线演示 本地下载

  7. lk进kernel

    -- ] [upmu_is_chr_det] [] DRAM Rank : [] DRAM Rank[] Start = 0x40000000, Size = 0x25fc0000 [] DRAM R ...

  8. hadoop —— eclipse插件安装配置

    安装: 1. 将hadoop-core-0.20.2-cdh3u6/contrib/eclipse-plugin/hadoop-eclipse-plugin-0.20.2-cdh3u6.jar拷贝到e ...

  9. Vagrant + Vbox实战 【转】

    原文地址:http://www.cnblogs.com/suihui/p/4362233.html 一.软件下载 1.下载Oracle VM VirtualBox https://www.virtua ...

  10. php设计模式课程---5、责任链模式是什么

    php设计模式课程---5.责任链模式是什么 一.总结 一句话总结: 自己权限不够,就交给上级处理 1.选择结构怎么做到面向对象开闭原则? 也就是说if,都可以用接口的实现来实现,这样就避免了更新的时 ...