Extjs表单验证的编写方法及vtypes集合
一 背景
Extjs5.1中默认的vtype有字符验证，字母数字验证，email验证，必填项验证，但是对于大部分界面的需求来讲，这些是不够的，我们需要自己写一些验证。本文讲解了编写vtype的方法，并且提供一个自己编写的vtype集合，希望能对初学者有点帮助.
二 vtype编写方法
在Extjs中，一个vtype就是一个验证函数，其返回值决定是否通过验证，即return true时，表单项验证通过，否则，不通过，并且将其出错信息提示出来。
我们先看一个vtype
Ext.apply(Ext.form.VTypes,
{
testEqual:function(val, field)
{
if(val != 'kingfs'){
field.vtypeText = "输入内容不为kingfs";
return false;
}
return true;
//错误信息也可以写成如下格式：
//testEqualText = "输入内容不为kingfs"
}
1. 调用Ext.apply，来对Ext.form.VTypes类增加方法
2. vtype函数有两个传入参数:val和field，val是控件内输入的内容，field是指当前校验的控件
3. 满足校验条件的情况，返回true
4.不满足校验条件的情况，返回false，并且需要提供出错提示信息
这么看来，编写一个vtype还是比较简单的。
三 一个比较丰富的vtype集合
最近写了一个支持多种vtype的集合，包含的功能：
1. 字符串的长度验证(最大长度，最小长度，长度范围)
2. 字符串的的非法字符验证(支持正则表达式，非法字符的串)
3. 时间格式验证
4. 整数验证(含16进制，10进制)
5.整数范围验证(最大值，最小值，范围值)
6. ip地址验证(ipv4,ipv6,及ipv4地址字符串)
7. 密码和确认密码验证
8. mac地址验证
9. ipv4的子网掩码验证
10. 禁止输入非法字符
11.组合验证
写的比较简单，还请高手多多指教
/**
* 增加多种表单检验的vtypes
* @author kingfs
* 综合检查使用 "vtype":"comboCheck", "checkParam":{max:10,min:1,unsafeChar:'!@#$%^&*' }
*
* 可以单独使用某个vtype
* 但检查的参数都是有checkParam提供
*
* checkParam可选参数如下：
* 1. max [number] 最大值
* 2. min [number] 最小值
* 3. maxLen 输入的最大长度
* 4. minLen 输入的最小长度
* .....
*/
Ext.apply(Ext.form.VTypes,
{
maxLength:function(val, field)
{
var len = val.length;
if(field.checkParam && field.checkParam.maxLen){
if(len > field.checkParam.maxLen)
{
field.vtypeText = "最大长度:"+field.checkParam.maxLen;
return false;
}
}
return true;
},
minLength:function(val, field)
{
var len = val.length;
if(field.checkParam && field.checkParam.minLen){
if(len < field.checkParam.minLen)
{
field.vtypeText = "最小长度:"+field.checkParam.minLen;
return false;
}
}
return true;
},
rangeLength:function(val, field)
{
return (this.maxLength(val,field) && this.minLength(val,field));
},
number:function(val, field)
{
var exp = /^([0-9a-f]{0,20})$/i;
if(!exp.test(val)){
field.vtypeText = "请输入数字(支持16进制)";
return false;
}
return true;
},
integer:function(val, field)
{
var exp = /^([0-9]{0,20})$/i;
if(!exp.test(val)){
field.vtypeText = "请输入数字";
return false;
}
return true;
},
max:function(val, field)
{
var v=NaN;
if(/[a-f]/i.test(val))
v = parseInt(val, 16);
else
v = parseInt(val);
if(isNaN(v)){
field.vtypeText = "请输入数字";
return false;
}
if(field.checkParam && field.checkParam.max){
if(v > field.checkParam.max)
{
field.vtypeText = "最大值:"+field.checkParam.max;
return false;
}
}
return true;
},
min:function(val, field)
{
var v=NaN;
if(/[a-f]/i.test(val))
v = parseInt(val, 16);
else
v = parseInt(val);
if(isNaN(v)){
field.vtypeText = "请输入数字";
return false;
}
if(field.checkParam && field.checkParam.min){
if(v < field.checkParam.min)
{
field.vtypeText = "最小值:"+field.checkParam.min;
return false;
}
}
return true;
},
range:function(val, field)
{
return (this.max(val,field) && this.min(val,field));
},
ip:function(val,field)
{
if(this.ipv4(val,field) || this.ipv6(val,field))
return true;
field.vtypeText = '请输入正确的IP地址';
return false;
},
ipv4:function(val,field)
{
var reg = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/;
if (reg.test(val)){
var p1 = parseInt(RegExp.$1),
p2 = parseInt(RegExp.$2),
p3 = parseInt(RegExp.$3),
p4 = parseInt(RegExp.$4);
if( p1 < 256 && p2 < 256 && p3 < 256 && p4 < 256)
return true;
}
field.vtypeText = '请输入正确的IPv4地址';
return false;
},
ipv4Mask:function(val,field)
{
var reg = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/;
if (reg.test(val)){
var p1 = parseInt(RegExp.$1),
p2 = parseInt(RegExp.$2),
p3 = parseInt(RegExp.$3),
p4 = parseInt(RegExp.$4);
if( p1 < 256 && p2 < 256 && p3 < 256 && p4 < 256){
var mask = p1 * (1<<24) + p2 * (1<<16) + p3 * (1<<8) + p4;
var maskStr = mask.toString(2);
var mArr = maskStr.match(/1{1,32}/g);
if(mArr && mArr.length==1){
return true;
}
}
}
field.vtypeText = '请输入正确的IPv4掩码';
return false;
},
ipv6:function(val,field)
{
if(val.match(/:/g).length<=7&&/::/.test(val)?/^([\da-f]{1,4}(:|::)){1,6}[\da-f]{1,4}$/i.test(val):/^([\da-f]{1,4}:){7}[\da-f]{1,4}$/i.test(val)){
return true;
}
field.vtypeText = '请输入正确的IPv6地址';
return false;
},
mac:function(val,field)
{
if(val.match(/:/g).length==5?/^([0-9a-f]{2})(:[0-9a-f]{2}){5}$/i.test(val):false){
return true;
}
field.vtypeText = '请输入正确的Mac地址';
return false;
},
unInputChar:function(val, field)
{
//输入非法字符，直接删除
var exp = /[ '\\\"`$&<>#+%@|~!=^?;]/g;
if(field.checkParam && field.checkParam.unsafeChar){
exp = new RegExp('/['+field.checkParam.unsafeChar+']/g');
}
val = val.replace(exp, "");
field.setValue(val);
return true;
},
unsafeChar:function(val,field)
{
//使用字符串做比较
var fibdn,ret;
if(field.checkParam && field.checkParam.unsafeChar){
fibdn = field.checkParam.unsafeChar;
}else if(field.checkParam && !field.checkParam.unsafe) {
fibdn = " '\\\"`$&<>#+%@|~!=^?;";
}else{
return true;
}
for ( var i=0; i=0){
field.vtypeText = '起始时间小于结束时间,请重新输入';
return false;
}
}else if(field.checkParam.littleTo){
nObjId = field.checkParam.littleTo;
nObj = Ext.getCmp(nObjId);
nVal = nObj.getValue();
if(!this.dateTime(nVal)){
return false;
}
if(Date.parse(val)-Date.parse(nVal)>=0){
field.vtypeText = '结束时间大于起始时间,请重新输入';
return false;
}
}
}
return true;
},
comboCheck: function(val, field)
{
var type;
if(!field.checkParam || !field.checkParam.type)
type = "string";
else
type = field.checkParam.type;
if(type == 'string'){
if(field.checkParam && field.checkParam.safeCheck){
if(!this.unsafe(val,field))
return false;
if(!this.unsafeChar(val,field))
return false;
}
if(!this.rangeLength(val,field))
return false;
}
else if(type == 'ipv4String'){
var splitChar = " ";
if(field.checkParam && field.checkParam.splitChar){
splitChar = field.checkParam.splitChar;
}
var ipArr = val.split(splitChar);
for(var ip in ipArr){
if(ipArr[ip] == '')
continue;
if(!this.ipv4(ipArr[ip],field))
return false;
}
}
else if(type == 'some_combo_add_later'){
}
return true;
}
});