Ext验证

  1. 近日来对Ext特别感兴趣,也许是它那种OO的设计思想吸引了我,也可以追溯到第一次见到EXT那种漂亮的界面开始吧.求神拜佛不如自食其力,为了一点小的问题找遍了GOOGLE也没个结果,自己甚少去BBS混,也不熟悉规矩,只能硬着头皮自己干了.翻源代码是一道必不可少的工序,说来惭愧,自己对JS的认识还停留在入门阶段. 
  2.  
  3. 这里说说自己对于Ext验证这里浅薄的理解: 
  4.  
  5. 首先看看如下一段代码 
  6.  
  7. Ext.applyIf(Ext.form.VTypes, { 
  8.        "mail" : function(_v) { 
  9.         return /^\w+@\w+\.\w+$/.test(_v); 
  10.        }, 
  11.        "mailText" : "请输入正确的email格式!\n例如:username@domain.com"
  12.        "mailMask" : /[\w@.]/i 
  13.       }); 
  14.  
  15. 这里是对Ext.form.VTypes进行扩展,增加了我们需要的email验证. 
  16.  
  17. 既然是扩展,那么我们就得先来看看这个父类到底是个什么样子. 
  18.  
  19. Ext.form.VTypes = function(){ 
  20.     // closure these in so they are only created once. 
  21.     var alpha = /^[a-zA-Z_]+$/; 
  22.     var alphanum = /^[a-zA-Z0-9_]+$/; 
  23.     var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/; 
  24.     var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i; 
  25.  
  26.     return
  27.         'email' : function(v){ 
  28.             return email.test(v); 
  29.         }, 
  30.         'emailMask' : /[a-z0-9_\.\-@]/i, 
  31.         'url' : function(v){ 
  32.             return url.test(v); 
  33.         }, 
  34.         'urlText' : 'This field should be a URL in the format "http:/'+'/www.domain.com"'
  35.         'alpha' : function(v){ 
  36.             return alpha.test(v); 
  37.         }, 
  38.         'alphaText' : 'This field should only contain letters and _'
  39.         'alphaMask' : /[a-z_]/i, 
  40.         'alphanum' : function(v){ 
  41.             return alphanum.test(v); 
  42.         }, 
  43.         'alphanumText' : 'This field should only contain letters, numbers and _'
  44.         'alphanumMask' : /[a-z0-9_]/i 
  45.     }; 
  46. }(); 
  47.  
  48. 以上就是Ext.form.VTypes的庐山真面目了,这里返回一个JSON的对象其中包括方法和属性,可以理解为这个类的公有方法和属性比较OO. 
  49. 通过分析我们可以看到这里有个规律,xxx,xxxText,xxxMask,这些东西到底都是干嘛的? 
  50.  
  51. 在我们的TextField类里边有这么一个字符类型的属性vtype,在TextField类的初始化代码中,有这么一段 
  52. if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Ext.form.VTypes[this.vtype+'Mask']))){ 
  53.             this.el.on("keypress", this.filterKeys, this); 
  54.         } 
  55. 这里我把重要的用黑体字标了出来,我们可以看到,当我们设置了当前对象(TextField)vtype属性时候,当前对象的maskRe属性获取了VTypes类的this.vtype+'Mask'属性,看到这里我们就明白了xxxMask属性里边的正则表达式是自动赋值给TextField的,这个属性在TextField控件keypress事件触发时候调用的,作用是用来限制输入的字符. 
  56.  
  57. 再看下面一段代码 
  58. if(this.vtype){ 
  59.             var vt = Ext.form.VTypes; 
  60.             if(!vt[this.vtype](value, this)){ 
  61.                 this.markInvalid(this.vtypeText || vt[this.vtype +'Text']); 
  62.                 return false
  63.             } 
  64.         } 
  65. 这里是fieldText控件的validateValue方法里边会执行到的代码,这段代码的作用就是验证当前控件输入的内容是否通过我们刚才定义的XXX里边的验证逻辑,如果未通过则使用this.arkinvalid方法去执行未通过操作并且返回一个false
  66. 具体谁调用这个validateValue方法,我们可以去查看该控件的父类,或与submit相关的类,这里只是返回一个与当前设置的vtype相关的验证属性 
  67.  
  68. 看到这里我们也就明白了,刚才上边定义的xxx,xxxText,xxxMask的作用分别为,验证逻辑,验证失败信息,控件输入验证. 
  69.  
  70. 知道了这些我们要来扩展这个VTypes就易如反掌了 
  71. Ext.applyIf(Ext.form.VTypes, { 
  72.        "mail" : function(_v) { //定义验证逻辑,返回布尔类型的验证结果 
  73.         return /^\w+@\w+\.\w+$/.test(_v); 
  74.        }, 
  75.        "mailText" : "请输入正确的email格式!\n例如:username@domain.com", //这里是验证失败信息 
  76.        "mailMask" : /[\w@.]/i   //这里是输入字符验证 
  77.       }); 
  78.  
  79. 好了,我们的验证到这里就结束了.如果需要更深入的验证,那么我们就必须自己去实现一些复杂的逻辑了. 
  80.  
  81. 这里再给大家贴出一些简单的验证逻辑 
  82.  
  83. Ext.apply(Ext.form.VTypes, { 
  84. // 年龄 
  85. "age" : function(_v) { 
  86.    if (/^\d+$/.test(_v)) { 
  87.     var _age = parseInt(_v); 
  88.     if (_age < 200) 
  89.      return true
  90.    } else 
  91.     return false
  92. }, 
  93. 'ageText' : '年龄格式出错!!格式例如:20'
  94. 'ageMask' : /[0-9]/i, 
  95. // 密码验证 
  96. "repassword" : function(_v, field) { 
  97.    if (field.confirmTO) { 
  98.     var psw = Ext.get(field.confirmTO); 
  99.     return (_v == psw.getValue()); 
  100.    } 
  101.    return true
  102. }, 
  103. "repasswordText" : "密码输入不一致!!"
  104. "repasswordMask" : /[a-z0-9]/i, 
  105. // 邮政编码 
  106. "postcode" : function(_v) { 
  107.    return /^[1-9]\d{5}$/.test(_v); 
  108. }, 
  109. "postcodeText" : "该输入项目必须是邮政编码格式,例如:226001"
  110. "postcodeMask" : /[0-9]/i, 
  111.  
  112. // IP地址验证 
  113. "ip" : function(_v) { 
  114.    return /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/ 
  115.      .test(_v); 
  116.  
  117. }, 
  118. "ipText" : "该输入项目必须是IP地址格式,例如:222.192.42.12"
  119. "ipMask" : /[0-9\.]/i, 
  120. // 固定电话及小灵通 
  121. "telephone" : function(_v) { 
  122.    return /(^\d{3}\-\d{7,8}$)|(^\d{4}\-\d{7,8}$)|(^\d{3}\d{7,8}$)|(^\d{4}\d{7,8}$)|(^\d{7,8}$)/ 
  123.      .test(_v); 
  124. }, 
  125. "telephoneText" : "该输入项目必须是电话号码格式,例如:0513-89500414,051389500414,89500414"
  126. "telephoneMask" : /[0-9\-]/i, 
  127. // 手机 
  128. "mobile" : function(_v) { 
  129.    return /^1[35][0-9]\d{8}$/.test(_v); 
  130. }, 
  131. "mobileText" : "该输入项目必须是手机号码格式,例如:13485135075"
  132. "mobileMask" : /[0-9]/i, 
  133. // 身份证 
  134. "IDCard" : function(_v) { 
  135.    // return /(^[0-9]{17}([0-9]|[Xx])$)|(^[0-9]{17}$)/.test(_v); 
  136.    var area = { 
  137.     11 : "北京"
  138.     12 : "天津"
  139.     13 : "河北"
  140.     14 : "山西"
  141.     15 : "内蒙古"
  142.     21 : "辽宁"
  143.     22 : "吉林"
  144.     23 : "黑龙江"
  145.     31 : "上海"
  146.     32 : "江苏"
  147.     33 : "浙江"
  148.     34 : "安徽"
  149.     35 : "福建"
  150.     36 : "江西"
  151.     37 : "山东"
  152.     41 : "河南"
  153.     42 : "湖北"
  154.     43 : "湖南"
  155.     44 : "广东"
  156.     45 : "广西"
  157.     46 : "海南"
  158.     50 : "重庆"
  159.     51 : "四川"
  160.     52 : "贵州"
  161.     53 : "云南"
  162.     54 : "西藏"
  163.     61 : "陕西"
  164.     62 : "甘肃"
  165.     63 : "青海"
  166.     64 : "宁夏"
  167.     65 : "新疆"
  168.     71 : "台湾"
  169.     81 : "香港"
  170.     82 : "澳门"
  171.     91 : "国外" 
  172.    } 
  173.    var Y, JYM; 
  174.    var S, M; 
  175.    var idcard_array = new Array(); 
  176.    idcard_array = _v.split(""); 
  177.    // 地区检验 
  178.    if (area[parseInt(_v.substr(0, 2))] == null) { 
  179.     this.IDCardText = "身份证号码地区非法!!,格式例如:32"
  180.     return false
  181.    } 
  182.    // 身份号码位数及格式检验 
  183.    switch (_v.length) { 
  184.     case 15 : 
  185.      if ((parseInt(_v.substr(6, 2)) + 1900) % 4 == 0 
  186.        || ((parseInt(_v.substr(6, 2)) + 1900) % 100 == 0 && (parseInt(_v 
  187.          .substr(6, 2)) + 1900) 
  188.          % 4 == 0)) { 
  189.       ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/;// 测试出生日期的合法性 
  190.      } else
  191. ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/;// 测试出生日期的合法性 
  192.      } 
  193.      if (ereg.test(_v)) 
  194.       return true
  195.      else
  196.       this.IDCardText = "身份证号码出生日期超出范围,格式例如:19860817"
  197.       return false
  198.      } 
  199.      break
  200.     case 18 : 
  201.      // 18位身份号码检测 
  202.      // 出生日期的合法性检查 
  203.      // 闰年月日:((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9])) 
  204.      // 平年月日:((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8])) 
  205.      if (parseInt(_v.substr(6, 4)) % 4 == 0 
  206.        || (parseInt(_v.substr(6, 4)) % 100 == 0 && parseInt(_v 
  207.          .substr(6, 4)) 
  208.          % 4 == 0)) { 
  209.       ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;// 闰年出生日期的合法性正则表达式 
  210.      } else
  211.       ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;// 平年出生日期的合法性正则表达式 
  212.      } 
  213.      if (ereg.test(_v)) {// 测试出生日期的合法性 
  214.       // 计算校验位 
  215.       S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) 
  216.         * 7 
  217.         + (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) 
  218.         * 9 
  219.         + (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) 
  220.         * 10 
  221.         + (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) 
  222.         * 5 
  223.         + (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) 
  224.         * 8 
  225.         + (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) 
  226.         * 4 
  227.         + (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) 
  228.         * 2 
  229.         + parseInt(idcard_array[7]) 
  230.         * 1 
  231.         + parseInt(idcard_array[8]) 
  232.         * 6 
  233.         + parseInt(idcard_array[9]) * 3; 
  234.       Y = S % 11; 
  235.       M = "F"
  236.       JYM = "10X98765432"
  237.       M = JYM.substr(Y, 1);// 判断校验位 
  238.       // alert(idcard_array[17]); 
  239.       if (M == idcard_array[17]) { 
  240.        return true; // 检测ID的校验位 
  241.       } else
  242.        this.IDCardText = "身份证号码末位校验位校验出错,请注意x的大小写,格式例如:201X"
  243.        return false
  244.       } 
  245.      } else
  246.       this.IDCardText = "身份证号码出生日期超出范围,格式例如:19860817"
  247.       return false
  248.      } 
  249.      break
  250.     default
  251.      this.IDCardText = "身份证号码位数不对,应该为15位或是18位"
  252.      return false
  253.      break
  254.    } 
  255. }, 
  256. "IDCardText" : "该输入项目必须是身份证号码格式,例如:32082919860817201x"
  257. "IDCardMask" : /[0-9xX]/i 
  258. }); 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值