一 背景
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;
}
<pre name="code" class="javascript"> 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;