文档章节

Jquery Easyui验证扩展,EasyUI增加校验规则,Easyui验证,Easyui校验

h
 huaxianger
发布于 2017/01/09 09:41
字数 845
阅读 41
收藏 0

一、扩展easyui的验证规则

 

Js代码 下载 

 收藏代码

  1.  /* easyUI自带的校验 */  
  2.  /*  
  3.   email: Match email regex rule. 
  4.   url: Match URL regex rule. 
  5.   length[0,100]: Between x and x characters allowed. 
  6.   remote['http://.../action.do','paramName']: Send ajax request to do validate value, return 'true' when successfully.  
  7.  */  
  8.    
  9.  $.extend($.fn.validatebox.defaults.rules, {  
  10.     phone : {//手机号码校验  
  11.         validator: function(value, param){  
  12.             return checkPhone(value);  
  13.         },  
  14.         message: '请输入正确的手机号码。'  
  15.     },  
  16.     myEmail : {//邮箱校验,避免使用email和默认的冲突  
  17.         validator: function(value, param){  
  18.             return checkEmail(value);  
  19.         },  
  20.         message: '请输入正确的邮箱'  
  21.     },  
  22.     loginName : {//登录名,数字、英文字母或者下划线  
  23.         validator: function(value, param){  
  24.             return checkLoginName(value);  
  25.         },  
  26.         message: '只能输入数字、英文字母或者下划线'  
  27.     },  
  28.     telePhone : {//座机,区号及分机号可有可无  
  29.         validator: function(value, param){  
  30.             return checkTelePhone(value);  
  31.         },  
  32.         message: '请输入正确的座机号码'  
  33.     },  
  34.     chinese : {//  
  35.         validator: function(value, param){  
  36.             return checkChinese(value);  
  37.         },  
  38.         message: '只能输入中文汉字'  
  39.     },  
  40.     number : {//正整数,包括0(00,01非数字)  
  41.         validator: function(value, param){  
  42.             return isNumber(value);  
  43.         },  
  44.         message: '只能输入数字(01非数字)'  
  45.     },  
  46.     numberText : {//数字组成的字符串,如000222,22220000,00000  
  47.         validator: function(value, param){  
  48.             return isNumberText(value);  
  49.         },  
  50.         message: '只能输入数字字符串'  
  51.     },  
  52.     idCardNo : {//身份证  
  53.         validator: function(value, param){  
  54.             return isIdCardNo(value);  
  55.         },  
  56.         message: '请输入正确的身份证号码'  
  57.     },  
  58.     money : {//金额  
  59.         validator: function(value, param){  
  60.             return isFloat(value);  
  61.         },  
  62.         message: '请输入正确的数字'  
  63.     },  
  64.     floatNumber : {//数字(包括正整数、0、浮点数)  
  65.         validator: function(value, param){  
  66.             return isFloat(value);  
  67.         },  
  68.         message: '请输入正确的数字'  
  69.     },  
  70.     minLength: {  
  71.         validator: function(value, param){  
  72.             return value.length >= param[0];  
  73.         },  
  74.         message: '请输入至少 {0}个字符。'  
  75.     },  
  76.     maxLength: {  
  77.         validator: function(value, param){  
  78.             return value.length <= param[0];  
  79.         },  
  80.         message: '不能输入超过{0}个字符。'  
  81.     }  
  82. });  

 

二、使用

在data-option加上属性:validType:'phone'下载 ,如下面所示:

Html代码 

 收藏代码

  1. data-options="required:true,validType:'phone'"  

 

Html代码 

 收藏代码

  1. data-options="required:false,validType:'telePhone'"  

 

三、部分校验方法

 

Js代码 下载 

 收藏代码

  1. /** 
  2. * 去掉字符串头尾空格 
  3. */  
  4. function trim(str) {  
  5.     if(str == null){  
  6.         return "";  
  7.     }  
  8.     return str.replace(/(^\s*)|(\s*$)/g, "");  
  9. };  
  10.   
  11. /**  
  12.  * 是否为Null  
  13.  *
  14.  * @returns {Boolean}  
  15.  */    
  16. function isNull(object){    
  17.     if(object == null || typeof object == "undefined"){    
  18.         return true;    
  19.     }    
  20.     return false;    
  21. };   
  22.   
  23. /**  
  24.  * 是否为空字符串,有空格不是空字符串  
  25.  * str  
  26.  * @returns {Boolean}  
  27.  */    
  28. function isEmpty(str){    
  29.     if(str == null || typeof str == "undefined" ||     
  30.             str == ""){    
  31.         return true;    
  32.     }    
  33.     return false;    
  34. };  
  35.   
  36. /**  
  37.  * 是否为空字符串,全空格也是空字符串  
  38.  * 
  39.  */    
  40. function isBlank(str){    
  41.     if(str == null || typeof str == "undefined" ||     
  42.             str == "" || trim(str) == ""){    
  43.         return true;    
  44.     }    
  45.     return false;    
  46. };  

 

Js代码 

 收藏代码

  1. /** 
  2.  * 检查手机号码 
  3.  * 
  4. */  
  5. function checkPhone(z_check_value) {  
  6.     if(isEmpty(z_check_value) || z_check_value.length != 11){  
  7.         return false;  
  8.     }  
  9.     var z_reg = /^13[0-9]{9}|15[012356789][0-9]{8}|18[0-9]{9}|(14[57][0-9]{8})|(17[015678][0-9]{8})$/;  
  10.     return z_reg.test(z_check_value);  
  11. };  

 

Js代码 下载 

 收藏代码

  1. /** 
  2.  * 检查电子邮箱 
  3.  * 
  4. */  
  5. function checkEmail(z_check_value){  
  6.     //var emailReg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;  
  7.     var z_reg =  /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;  
  8.     return z_reg.test($.trim(z_check_value));  
  9. };  

 

Js代码 

 收藏代码

  1. /** 
  2.  * 检查登录名(由数字、26个英文字母或者下划线组成的字符串) 
  3.  *  z_check_value 要检查的值 
  4.  *  符合返回true,否false 
  5.  * 2015-12-29 
  6. */  
  7. function checkLoginName(z_check_value){  
  8.     var z_reg = /^\w+$/;  
  9.     return z_reg.test($.trim(z_check_value));  
  10. };  

 

 

Js代码 

 收藏代码

  1. /** 
  2.  * 检查电话号码 
  3.  * 
  4. */  
  5. function checkTelePhone(z_check_value){  
  6.     var z_reg = /^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,4}))?$/;  
  7.     return z_reg.test($.trim(z_check_value));  
  8. };  

 

Js代码 下载 

 收藏代码

  1. /** 
  2.  * 检查仅中文 
  3.  *  
  4. */  
  5. function checkChinese(z_check_value){  
  6.     var z_reg = /^[\u4E00-\u9FA5\uF900-\uFA2D]+$/;  
  7.     return z_reg.test($.trim(z_check_value));  
  8. };  

 

Js代码 

 收藏代码

  1. /** 
  2.  * 是否为数字 
  3.  * 
  4. */  
  5. function isNumber(z_check_value){  
  6.     var z_reg = /^(([0-9])|([1-9]([0-9]+)))$/;  
  7.     return z_reg.test($.trim(z_check_value));  
  8. };  

 

Js代码 

 收藏代码

  1. /** 
  2.  * 是否为数字组成的字符串,01也符合规则 
  3.  * 
  4. */  
  5. function isNumberText(z_check_value){  
  6.     var z_reg = /^([0-9]+)$/;  
  7.     return z_reg.test($.trim(z_check_value));  
  8. };  

 

Js代码 

 收藏代码

  1. /** 
  2.  * 可以判断是否为数字、金额、浮点数 
  3.  *  z_check_value 要检查的值 
  4.  * 符合返回true,否false 
  5.  * lqy 
  6.  * @since 2017-01-07 
  7. */  
  8. function isFloat(z_check_value){  
  9.     var z_reg = /^((([0-9])|([1-9][0-9]+))(\.([0-9]+))?)$/;//.是特殊字符,需要转义  
  10.     return z_reg.test($.trim(z_check_value));  
  11. };  

© 著作权归作者所有

h
粉丝 0
博文 2
码字总数 1062
作品 0
济南
私信 提问
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
2018/06/28
0
0
jquery-easyui 前端开发脚手架

Easyui-scaffold is a front-end development of scaffold, which based on the Easyui and jquery-easyui. The rapid establishment of enterprise application model. 基于 EasyUI 和 jque......

waylau
2015/11/05
1
0
jQuery EasyUI入门视频教程【20讲】

jQuery EasyUI入门视频教程【20讲】 jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。非职业讲师孙宇讲授,全...

Amamatthew
2014/09/28
0
0
EasyUI 1.5.x Of Insdep Theme 1.0.0 RC1 美化主题大包已发布

关于 Insdep theme是基于EasyUI 1.5.x 的一款免费的美化主题包,拥有百度编辑器、cropper、Highcharts、justgage、plupload等各类适应本主题的第三方插件美化补丁。并且各类常用Jquery插件正...

magicweng
2017/02/22
5.3K
24
JQuery EasyUi之界面设计——前言与界面效果(一)

如果冯巩的开场白是“观众朋友们,我想死你们了”,那么我的开场白是“最近一直很忙,很久没有发文了”。 前面说过了EXT.NET,这里顺便再说说JQuery EasyUI。为啥我会选择JQuery EasyUI呢?主...

易水寒丶开源
2015/10/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

在Javascript中Eval函数的使用

【eval()函数】 JavaScript有许多小窍门来使编程更加容易。 其中之一就是eval()函数,这个函数可以把一个字符串当作一个JavaScript表达式一样去执行它。 举个小例子: var the_unevaled_ans...

花漾年华
24分钟前
3
0
[日更-2019.5.22、23] Android 系统的分区和文件系统(二)--Android 文件系统中的文件

声明 Android系统中有很多分区,每个分区内的文件系统一般都不同的,使用ADB进入系统/目录下可发现挂载这很多的目录,不同的目录中可来自不同的分区及文件系统; 那么,就来分下这些目录里面...

小馬佩德罗
28分钟前
2
0
数组操作相关算法

/*数组的相关的算法操作:1、在数组中找最大值/最小值*/class Test11_FindMax{public static void main(String[] args){int[] array = {4,2,6,8,1};//在数组中找最大...

architect刘源源
今天
4
0
okhttp3 以上版本在安卓9.0无法请求数据的解决方案

应用官方的说明:在 Android 6.0 中,我们取消了对 Apache HTTP 客户端的支持。 从 Android 9 开始,默认情况下该内容库已从 bootclasspath 中移除且不可用于应用。且Android P 限制了明文流量...

chenhongjiang
今天
12
0
简单示例:NodeJs连接mysql数据库

开篇引用网上的说法: 简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境,基于...

李朝强
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部