Extjs自定义验证介绍

  1. 表单验证实例（空验证，密码确认验证，email验证）
    我们可以用单独的js写表单验证，但是extjs已经为我们想到了（自己单独写反而不方便）。
    在验证之前，我不得不提两个小知识点：
    //大家在很多的extjs代码中都看到了这两个，他们都起提示作用的
    Ext.QuickTips.init();//支持tips提示
    Ext.form.Field.prototype.msgTarget='side';//提示的方式，枚举值为"qtip","title","under","side",id(元素id)
              //side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示，其他的我就不介绍了，可自行验证
    //大家可以分别去掉这两行代码，看效果就会明白他们的作用，（放在onReady的function（）{}中）

    1.我们看一个最简单的例子：空验证（其实这不算是一个专门的验证例子）
    //空验证的两个参数
    1.allowBlank:false//false则不能为空，默认为true
    2.blankText:string//当为空时的错误提示信息
    js代码为：
    复制代码
    var form1 = new Ext.form.FormPanel({
           width:350,
           frame:true,
           renderTo:"form1",
           labelWidth:80,
           title:"FormPanel",
           bodyStyle:"padding:5px 5px 0",
           defaults:{width:150,xtype:"textfield",inputType:"password"},
           items:[
                   {fieldLabel:"不能为空",
                    allowBlank:false,//不允许为空
                     blankText:"不能为空，请填写",//错误提示信息，默认为This field is required!
                    id:"blanktest",
                    anchor:"90%"
                   }
           ]
        });
    复制代码

    2.用vtype格式进行简单的验证。
    在此举邮件验证的例子，重写上面代码的items配置:
    复制代码
    items:[
                   {fieldLabel:"不能为空",
                    vtype:"email",//email格式验证
                    vtypeText:"不是有效的邮箱地址",//错误提示信息,默认值我就不说了
                    id:"blanktest",
                    anchor:"90%"
                   }
    复制代码

    你可以修改上面的vtype为以下的几种extjs的vtype默认支持的验证：
    //form验证中vtype的默认支持类型
    1.alpha //只能输入字母，无法输入其他（如数字，特殊符号等）
    2.alphanum//只能输入字母和数字，无法输入其他
    3.email//email验证，要求的格式是"langsin@gmail.com"
    4.url//url格式验证，要求的格式是http://www.***
    3.确认密码验证（高级自定义验证）
    前面的验证都是extjs已经提供的验证，我们也可以自定义验证函数，比上面要复杂点了。我们一起做一个密码确认的例子。
    我们修改前面的代码：
    复制代码
    //先用Ext.apply方法添加自定义的password验证函数（也可以取其他的名字）
    Ext.apply(Ext.form.VTypes,{
        password:function(val,field){//val指这里的文本框值，field指这个文本框组件，大家要明白这个意思
           if(field.confirmTo){//confirmTo是我们自定义的配置参数，一般用来保存另外的组件的id值
               var pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id的值
               return (val==pwd.getValue());
           }
           return true;
        }
    });
    //配置items参数
    items:[{fieldLabel:"密码",
                    id:"pass1",
                    anchor:"90%"
                   },{
                    fieldLabel:"确认密码",
                    id:"pass2",
                    vtype:"password",//自定义的验证类型
                      vtypeText:"两次密码不一致！",
                      confirmTo:"pass1",//要比较的另外一个的组件的id
                    anchor:"90%"
                   }
    复制代码

    关于vtype的内容还有很多内容要挖掘，但现在我们就点到这里为止，以后有机会再讨论它的其他高级验证。
    不知不觉中写了这么多，大家都要歇息了，我们下次再接着讨论，
    （因为本人近期考试和其他锁杂事情，近期可能更新较慢，还请大家海量，耐心，支持！）
  2. //首先说明一下这些是extjs扩展的验证方法  apply 复制
  3. Ext.apply(Ext.form.field.VTypes,     
  4. {    
  5.     daterange: function(val, field)     
  6.     {    
  7.         var date = field.parseDate(val);    
  8.         
  9.         // We need to force the picker to update values to recaluate the disabled dates display    
  10.         var dispUpd = function(picker)     
  11.         {    
  12.             var ad = picker.activeDate;    
  13.             picker.activeDate = null;    
  14.             picker.update(ad);    
  15.         };    
  16.         
  17.         if (field.startDateField)     
  18.         {    
  19.             var sd = Ext.getCmp(field.startDateField);    
  20.             sd.maxValue = date;    
  21.             if (sd.menu && sd.menu.picker)     
  22.             {    
  23.                 sd.menu.picker.maxDate = date;    
  24.                 dispUpd(sd.menu.picker);    
  25.             }    
  26.         }     
  27.         else if (field.endDateField)     
  28.         {    
  29.             var ed = Ext.getCmp(field.endDateField);    
  30.             ed.minValue = date;    
  31.             if (ed.menu && ed.menu.picker)     
  32.             {    
  33.                 ed.menu.picker.minDate = date;    
  34.                 dispUpd(ed.menu.picker);    
  35.             }    
  36.         }    
  37.         return true;    
  38.     },    
  39.      daterangeText:'起始时间不能大于结束时间'
  40.   password: function(val, field)     
  41.   {    
  42.         if (field.initialPassField)     
  43.         {    
  44.             var pwd = Ext.getCmp(field.initialPassField);    
  45.             return (val == pwd.getValue());     
  46.         }    
  47.         return true;    
  48.   },    
  49.   passwordText: '两次输入的密码不一致！',    
  50.       
  51.   chinese:function(val,field)    
  52.   {    
  53.         var reg = /^[/u4e00-/u9fa5]+$/i;    
  54.         if(!reg.test(val))    
  55.         {    
  56.             return false;    
  57.         }    
  58.         return true;    
  59.   },    
  60.   chineseText:'请输入中文',    
  61.       
  62.   age:function(val,field)    
  63.   {    
  64.         try    
  65.         {    
  66.             if(parseInt(val) >= 18 && parseInt(val) <= 100)    
  67.                 return true;    
  68.             return false;    
  69.         }    
  70.         catch(err)     
  71.         {    
  72.             return false;    
  73.         }    
  74.   },    
  75.   ageText:'年龄输入有误',    
  76.       
  77.   alphanum:function(val,field)    
  78.   {    
  79.         try    
  80.         {    
  81.             if(!//W/.test(val))    
  82.                 return true;    
  83.             return false;    
  84.         }    
  85.         catch(e)    
  86.         {    
  87.             return false;    
  88.         }    
  89.   },    
  90.   alphanumText:'请输入英文字母或是数字,其它字符是不允许的.',    
  91.       
  92.   url:function(val,field)    
  93.   {    
  94.         try    
  95.         {    
  96.             if(/^(http|https|ftp):////(([A-Z0-9][A-Z0-9_-]*)(/.[A-Z0-9][A-Z0-9_-]*)+)(:(/d+))?//?/i.test(val))    
  97.                 return true;    
  98.             return false;    
  99.         }    
  100.         catch(e)    
  101.         {    
  102.             return false;    
  103.         }    
  104.   },    
  105.   urlText:'请输入有效的URL地址.',    
  106.       
  107.   max:function(val,field)    
  108.   {    
  109.         try    
  110.         {    
  111.             if(parseFloat(val) <= parseFloat(field.max))    
  112.                 return true;    
  113.             return false;    
  114.         }    
  115.         catch(e)    
  116.         {    
  117.             return false;    
  118.         }    
  119.   },    
  120.   maxText:'超过最大值',    
  121.       
  122.   min:function(val,field)    
  123.   {    
  124.         try    
  125.         {    
  126.             if(parseFloat(val) >= parseFloat(field.min))    
  127.                 return true;    
  128.             return false;    
  129.         }    
  130.         catch(e)    
  131.         {    
  132.             return false;    
  133.         }    
  134.   },    
  135.   minText:'小于最小值',    
  136.           
  137.   datecn:function(val,field)    
  138.   {    
  139.         try    
  140.         {    
  141.             var regex = /^(/d{4})-(/d{2})-(/d{2})$/;    
  142.             if(!regex.test(val)) return false;    
  143.             var d = new Date(val.replace(regex, '$1/$2/$3'));    
  144.             return (parseInt(RegExp.$2, 10) == (1+d.getMonth())) && (parseInt(RegExp.$3, 10) == d.getDate())&&(parseInt(RegExp.$1, 10) == d.getFullYear());    
  145.         }    
  146.         catch(e)    
  147.         {    
  148.             return false;    
  149.         }    
  150.   },    
  151.   datecnText:'请使用这样的日期格式: yyyy-mm-dd. 例如:2008-06-20.',    
  152.       
  153.   integer:function(val,field)    
  154.   {    
  155.         try    
  156.         {    
  157.             if(/^[-+]?[/d]+$/.test(val))    
  158.                 return true;    
  159.             return false;    
  160.         }    
  161.         catch(e)    
  162.         {    
  163.             return false;    
  164.         }    
  165.   },    
  166.   integerText:'请输入正确的整数',    
  167.       
  168.   minlength:function(val,field)    
  169.   {    
  170.         try    
  171.         {    
  172.             if(val.length >= parseInt(field.minlen))    
  173.                 return true;    
  174.             return false    
  175.         }    
  176.         catch(e)    
  177.         {    
  178.             return false;    
  179.         }    
  180.   },    
  181.   minlengthText:'长度过小',    
  182.       
  183.   maxlength:function(val,field)    
  184.   {    
  185.      try    
  186.      {    
  187.         if(val.length <= parseInt(field.maxlen))    
  188.             return true;    
  189.         return false;    
  190.      }    
  191.      catch(e)    
  192.      {    
  193.         return false;    
  194.      }    
  195.   },    
  196.   maxlengthText:'长度过大',    
  197.       
  198.   ip:function(val,field)    
  199.   {    
  200.         try    
  201.         {    
  202.             if((/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)/.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)))    
  203.                 return true;    
  204.             return false;    
  205.         }    
  206.         catch(e)    
  207.         {    
  208.             return false;    
  209.         }    
  210.   },    
  211.   ipText:'请输入正确的IP地址',    
  212.       
  213.   phone:function(val,field)    
  214.   {    
  215.         try    
  216.         {    
  217.             if(/^((0[1-9]{3})?(0[12][0-9])?[-])?/d{6,8}$/.test(val))    
  218.                 return true;    
  219.             return false;    
  220.         }    
  221.         catch(e)    
  222.         {    
  223.             return false;    
  224.         }    
  225.   },    
  226.   phoneText:'请输入正确的电话号码,如:0920-29392929',    
  227.       
  228.   mobilephone:function(val,field)    
  229.   {    
  230.         try    
  231.         {    
  232.             if(/(^0?[1][35][0-9]{9}$)/.test(val))    
  233.                 return true;    
  234.             return false;    
  235.         }    
  236.         catch(e)    
  237.         {    
  238.             return false;    
  239.         }    
  240.   },    
  241.   mobilephoneText:'请输入正确的手机号码',    
  242.       
  243.   alpha:function(val,field)    
  244.   {    
  245.         try    
  246.         {    
  247.             if( /^[a-zA-Z]+$/.test(val))    
  248.                 return true;    
  249.             return false;    
  250.         }    
  251.         catch(e)    
  252.         {    
  253.             return false;    
  254.         }    
  255.   },    
  256.   alphaText:'请输入英文字母'    
  257. });   
posted @ 2015-03-16 16:36  好好學習  阅读(286)  评论(0)  编辑  收藏  举报