[转]Ext自定义vtype动态验证

http://hi.baidu.com/huangzuduan/blog/item/4a82281b275af6f5af5133ae.html

近日来对Ext特别感兴趣,也许是它那种OO的设计思想吸引了我,也可以追溯到第一次见到EXT那种漂亮的界面开始吧.求神拜佛不如自食其力,为了一点小的问题找遍了GOOGLE也没个结果,自己甚少去BBS混,也不熟悉规矩,只能硬着头皮自己干了.翻源代码是一道必不可少的工序,说来惭愧,自己对JS的认识还停留在入门阶段.

这里说说自己对于Ext验证这里浅薄的理解:

首先看看如下一段代码

Ext.applyIf(Ext.form.VTypes, {
       "mail" : function(_v) {
        return /^\w+@\w+\.\w+$/.test(_v);
       },
       "mailText" : "请输入正确的email格式!\n例如:username@domain.com",
       "mailMask" : /[\w@.]/i
      });

这里是对Ext.form.VTypes进行扩展,增加了我们需要的email验证.

既然是扩展,那么我们就得先来看看这个父类到底是个什么样子.

Ext.form.VTypes = function(){
    // closure these in so they are only created once.
    var alpha = /^[a-zA-Z_]+$/;
    var alphanum = /^[a-zA-Z0-9_]+$/;
    var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/;
    var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;

    return {
        'email' : function(v){
            return email.test(v);
        },
        'emailMask' : /[a-z0-9_\.\-@]/i,
        'url' : function(v){
            return url.test(v);
        },
        'urlText' : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
        'alpha' : function(v){
            return alpha.test(v);
        },
        'alphaText' : 'This field should only contain letters and _',
        'alphaMask' : /[a-z_]/i,
        'alphanum' : function(v){
            return alphanum.test(v);
        },
        'alphanumText' : 'This field should only contain letters, numbers and _',
        'alphanumMask' : /[a-z0-9_]/i
    };
}();

以上就是Ext.form.VTypes的庐山真面目了,这里返回一个JSON的对象其中包括方法和属性,可以理解为这个类的公有方法和属性比较OO.
通过分析我们可以看到这里有个规律,xxx,xxxText,xxxMask,这些东西到底都是干嘛的?

在我们的TextField类里边有这么一个字符类型的属性vtype,在TextField类的初始化代码中,有这么一段
if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Ext.form.VTypes[this.vtype+'Mask']))){
            this.el.on("keypress", this.filterKeys, this);
        }
这里我把重要的用黑体字标了出来,我们可以看到,当我们设置了当前对象(TextField)vtype属性时候,当前对象的maskRe属性获取了VTypes类的this.vtype+'Mask'属性,看到这里我们就明白了xxxMask属性里边的正则表达式是自动赋值给TextField的,这个属性在TextField控件keypress事件触发时候调用的,作用是用来限制输入的字符.

再看下面一段代码
if(this.vtype){
            var vt = Ext.form.VTypes;
            if(!vt[this.vtype](value, this)){
                this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
                return false;
            }
        }
这里是fieldText控件的validateValue方法里边会执行到的代码,这段代码的作用就是验证当前控件输入的内容是否通过我们刚才定义的XXX里边的验证逻辑,如果未通过则使用this.arkinvalid方法去执行未通过操作并且返回一个false.
具体谁调用这个validateValue方法,我们可以去查看该控件的父类,或与submit相关的类,这里只是返回一个与当前设置的vtype相关的验证属性

看到这里我们也就明白了,刚才上边定义的xxx,xxxText,xxxMask的作用分别为,验证逻辑,验证失败信息,控件输入验证.

知道了这些我们要来扩展这个VTypes就易如反掌了
Ext.applyIf(Ext.form.VTypes, {
       "mail" : function(_v) { //定义验证逻辑,返回布尔类型的验证结果
        return /^\w+@\w+\.\w+$/.test(_v);
       },
       "mailText" : "请输入正确的email格式!\n例如:username@domain.com", //这里是验证失败信息
       "mailMask" : /[\w@.]/i   //这里是输入字符验证
      });

好了,我们的验证到这里就结束了.如果需要更深入的验证,那么我们就必须自己去实现一些复杂的逻辑了.

这里再给大家贴出一些简单的验证逻辑

Ext.apply(Ext.form.VTypes, {
// 年龄
"age" : function(_v) {
   if (/^\d+$/.test(_v)) {
    var _age = parseInt(_v);
    if (_age < 200)
     return true;
   } else
    return false;
},
'ageText' : '年龄格式出错！！格式例如：20',
'ageMask' : /[0-9]/i,
// 密码验证
"repassword" : function(_v, field) {
   if (field.confirmTO) {
    var psw = Ext.get(field.confirmTO);
    return (_v == psw.getValue());
   }
   return true;
},
"repasswordText" : "密码输入不一致！！",
"repasswordMask" : /[a-z0-9]/i,
// 邮政编码
"postcode" : function(_v) {
   return /^[1-9]\d{5}$/.test(_v);
},
"postcodeText" : "该输入项目必须是邮政编码格式，例如：226001",
"postcodeMask" : /[0-9]/i,

// IP地址验证
"ip" : function(_v) {
   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])$/
     .test(_v);

},
"ipText" : "该输入项目必须是IP地址格式，例如：222.192.42.12",
"ipMask" : /[0-9\.]/i,
// 固定电话及小灵通
"telephone" : function(_v) {
   return /(^\d{3}\-\d{7,8}$)|(^\d{4}\-\d{7,8}$)|(^\d{3}\d{7,8}$)|(^\d{4}\d{7,8}$)|(^\d{7,8}$)/
     .test(_v);
},
"telephoneText" : "该输入项目必须是电话号码格式，例如：0513-89500414,051389500414,89500414",
"telephoneMask" : /[0-9\-]/i,
// 手机
"mobile" : function(_v) {
   return /^1[35][0-9]\d{8}$/.test(_v);
},
"mobileText" : "该输入项目必须是手机号码格式，例如：13485135075",
"mobileMask" : /[0-9]/i,
// 身份证
"IDCard" : function(_v) {
   // return /(^[0-9]{17}([0-9]|[Xx])$)|(^[0-9]{17}$)/.test(_v);
   var area = {
    11 : "北京",
    12 : "天津",
    13 : "河北",
    14 : "山西",
    15 : "内蒙古",
    21 : "辽宁",
    22 : "吉林",
    23 : "黑龙江",
    31 : "上海",
    32 : "江苏",
    33 : "浙江",
    34 : "安徽",
    35 : "福建",
    36 : "江西",
    37 : "山东",
    41 : "河南",
    42 : "湖北",
    43 : "湖南",
    44 : "广东",
    45 : "广西",
    46 : "海南",
    50 : "重庆",
    51 : "四川",
    52 : "贵州",
    53 : "云南",
    54 : "西藏",
    61 : "陕西",
    62 : "甘肃",
    63 : "青海",
    64 : "宁夏",
    65 : "新疆",
    71 : "台湾",
    81 : "香港",
    82 : "澳门",
    91 : "国外"
   }
   var Y, JYM;
   var S, M;
   var idcard_array = new Array();
   idcard_array = _v.split("");
   // 地区检验
   if (area[parseInt(_v.substr(0, 2))] == null) {
    this.IDCardText = "身份证号码地区非法!!,格式例如:32";
    return false;
   }
   // 身份号码位数及格式检验
   switch (_v.length) {
    case 15 :
     if ((parseInt(_v.substr(6, 2)) + 1900) % 4 == 0
       || ((parseInt(_v.substr(6, 2)) + 1900) % 100 == 0 && (parseInt(_v
         .substr(6, 2)) + 1900)
         % 4 == 0)) {
      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}$/;// 测试出生日期的合法性
     } else {
      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}$/;// 测试出生日期的合法性
     }
     if (ereg.test(_v))
      return true;
     else {
      this.IDCardText = "身份证号码出生日期超出范围,格式例如:19860817";
      return false;
     }
     break;
    case 18 :
     // 18位身份号码检测
     // 出生日期的合法性检查
     // 闰年月日:((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]))
     // 平年月日:((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]))
     if (parseInt(_v.substr(6, 4)) % 4 == 0
       || (parseInt(_v.substr(6, 4)) % 100 == 0 && parseInt(_v
         .substr(6, 4))
         % 4 == 0)) {
      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]$/;// 闰年出生日期的合法性正则表达式
     } else {
      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]$/;// 平年出生日期的合法性正则表达式
     }
     if (ereg.test(_v)) {// 测试出生日期的合法性
      // 计算校验位
      S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10]))
        * 7
        + (parseInt(idcard_array[1]) + parseInt(idcard_array[11]))
        * 9
        + (parseInt(idcard_array[2]) + parseInt(idcard_array[12]))
        * 10
        + (parseInt(idcard_array[3]) + parseInt(idcard_array[13]))
        * 5
        + (parseInt(idcard_array[4]) + parseInt(idcard_array[14]))
        * 8
        + (parseInt(idcard_array[5]) + parseInt(idcard_array[15]))
        * 4
        + (parseInt(idcard_array[6]) + parseInt(idcard_array[16]))
        * 2
        + parseInt(idcard_array[7])
        * 1
        + parseInt(idcard_array[8])
        * 6
        + parseInt(idcard_array[9]) * 3;
      Y = S % 11;
      M = "F";
      JYM = "10X98765432";
      M = JYM.substr(Y, 1);// 判断校验位
      // alert(idcard_array[17]);
      if (M == idcard_array[17]) {
       return true; // 检测ID的校验位
      } else {
       this.IDCardText = "身份证号码末位校验位校验出错,请注意x的大小写,格式例如:201X";
       return false;
      }
     } else {
      this.IDCardText = "身份证号码出生日期超出范围,格式例如:19860817";
      return false;
     }
     break;
    default :
     this.IDCardText = "身份证号码位数不对,应该为15位或是18位";
     return false;
     break;
   }
},
"IDCardText" : "该输入项目必须是身份证号码格式，例如：32082919860817201x",
"IDCardMask" : /[0-9xX]/i
});