vtypes扩展

<strong>Ext.apply(Ext.form.field.VTypes, {    //首先定义一个vtype名称，和他的验证函数，val参数是文本框的值，field是文本框。一般我就使用val和正则表达式比较就OK了。  //然后定义一个vtype的报错信息，与vtype名称加Text后缀。OK了。  passwd: function(val, field)   {    if (field.initialPassField)     {      var pwd = Ext.getCmp(field.initialPassField);      return (val == pwd.getValue());    }    return true;  },  passwdText: '两次输入的密码不一致！',    chinese:function(val,field)  {  var reg = /^[\u4e00-\u9fa5]+$/i;  if(!reg.test(val))  {  return false;  }  return true;  },  chineseText:'请输入中文',    age:function(val,field)  {  try  {  if(parseInt(val) >= 18 && parseInt(val) <= 100)  return true;  return false;  }  catch(err)   {  return false;  }  },  ageText:'年龄输入有误',    alphanum:function(val,field)  {  try  {  if(!/\W/.test(val))  return true;  return false;  }  catch(e)  {  return false;  }  },  alphanumText:'请输入英文字母或是数字,其它字符是不允许的.',    url:function(val,field)  {  try  {  if(/^(http|https|ftp):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(:(\d+))?\/?/i.test(val))  return true;  return false;  }  catch(e)  {  return false;  }  },  urlText:'请输入有效的URL地址.',    max:function(val,field)  {  try  {  if(parseFloat(val) <= parseFloat(field.max))  return true;  return false;  }  catch(e)  {  return false;  }  },  maxText:'超过最大值',    min:function(val,field)  {  try  {  if(parseFloat(val) >= parseFloat(field.min))  return true;  return false;  }  catch(e)  {  return false;  }  },  minText:'小于最小值',      datecn:function(val,field)  {  try  {  var regex = /^(\d{4})-(\d{2})-(\d{2})$/;if(!regex.test(val)) return false;var d = new Date(val.replace(regex, '$1/$2/$3'));return (parseInt(RegExp.$2, 10) == (1+d.getMonth())) && (parseInt(RegExp.$3, 10) == d.getDate())&&(parseInt(RegExp.$1, 10) == d.getFullYear());  }  catch(e)  {  return false;  }  },  datecnText:'请使用这样的日期格式: yyyy-mm-dd. 例如:2008-06-20.',    integer:function(val,field)  {  try  {  if(/^[-+]?[\d]+$/.test(val))  return true;  return false;  }  catch(e)  {  return false;  }  },  integerText:'请输入正确的整数',    minlength:function(val,field)  {  try  {  if(val.length >= parseInt(field.minlen))  return true;  return false  }  catch(e)  {  return false;  }  },  minlengthText:'长度过小',    maxlength:function(val,field)  {   try   {   if(val.length <= parseInt(field.maxlen))   return true;   return false;   }   catch(e)   {   return false;   }  },  maxlengthText:'长度过大',    ip:function(val,field)  {  try  {  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)))  return true;  return false;  }  catch(e)  {  return false;  }  },  ipText:'请输入正确的IP地址',    phone:function(val,field)  {  try  {  if(/^((0[1-9]{3})?(0[12][0-9])?[-])?\d{6,8}$/.test(val))  return true;  return false;  }  catch(e)  {  return false;  }  },  phoneText:'请输入正确的电话号码,如:0920-29392929',    mobilephone:function(val,field)  {  try  {  if(/(^0?[1][35][0-9]{9}$)/.test(val))  return true;  return false;  }  catch(e)  {  return false;  }  },  mobilephoneText:'请输入正确的手机号码',    alpha:function(val,field)  {  try  {  if( /^[a-zA-Z]+$/.test(val))  return true;  return false;  }  catch(e)  {  return false;  }  },  alphaText:'请输入英文字母',    money:function(val,field)  {  try  {  if(/^\d+\.\d{2}$/.test(val))    return true;  return false;  }  catch(e)  {  return false;  }  },  moneyText:'请输入正确的金额'});</strong>

在页面引入上面新建的文件，在相应界面的组件中定义vtype,即可进行有限验证。

引用示例代码：

//构建一个密码Form        var pwd = new Ext.form.Panel({      labelWidth: 125,      frame: true,      title: '密码验证框',      width: 350,      renderTo : 'pw',      allowDomMove : true,      draggable : true,      defaults: {        width: 175,        inputType: 'password'      },      defaultType: 'textfield',      items: [{        fieldLabel: '密码:',        name: 'pass',        id: 'pass'      },{        fieldLabel: '密码确认:',        name: 'pass-cfrm',        vtype: 'passwd',        initialPassField: 'pass'      }]    });

 

其中，initialPassField是自定义的属性，记录上一个password的id,然后在VType的验证函数中取出上一个password组件的值，进行比较。

记住：上一个password必须设置id属性。