ExtJS5 - 使用vtype自定义表单域的验证规则

ExtJS内置提供的表单域验证规则比较简单，仅支持alpha（英文字母）、alphanum（英文字母和数字）、email（电子邮箱）、url（网址）四种格式，使用方式如下：

{
xtype: "textfield",
fieldLabel: "Email",
name: "email",
vtype: "email", //使用电子邮箱格式校验
vtypeText: "请输入正确的电子邮箱格式！"  //重写预定义的错误提示信息
}

好在ExtJS提供了比较好的扩展机制，允许通过扩展Ext.form.field.VTypes类来自定义自己需要的验证规则，这里以验证用户输入是否为有效的IP地址为例。

首先，扩展Ext.form.field.VTypes类，自定义验证规则：

//IP地址验证
Ext.apply(Ext.form.field.VTypes, {
ip: function(val, field) {
return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(val);
},
ipText: "请输入正确格式的IP地址！",
ipMask: /[\d\.]/i
});

ip：自定义的vtype属性值，使用合适的正则表达式对用户输入进行验证，通过则返回true，否则返回false。参数val是该表单域的值，field指该表单域元素。

ipText：用户自定义的错误提示信息。

ipMask：其值为正则表达式，过滤非法的键盘输入。比如这里用户只能输入数字和“.”操作符，输入其他字符会自动被忽略。

同一组验证规则的属性名称必须一致，符合 xx、xxText、xxMask 的形式。

在表单域中调用自定义的验证规则：

{
xtype: "textfield",
fieldLabel: "IP",
name: "ip",
vtype: "ip"
}

可见，合理运用ExtJS的表单验证扩展机制，可以实现非常强大的前端验证。另外，还可以利用表单域的allowBlank、maxLength、minLength及针对numberfield的maxValue、minValue实现非空、最大（小）长度、最大（小）值等基础验证。