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;
        }
<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;