ExtJS表单常见验证方法汇总

深入探讨 ExtJS 表单验证的实用技巧。在前端开发中，表单验证是不可或缺的基础环节，而 ExtJS 提供的验证机制既灵活又强大，合理运用能显著提升开发效率。不过，在正式使用前，需要先完成基础配置——在 onReady 中调用 Ext.QuickTips.init()，确保组件能够正常展示提示信息。此外，msgTarget 属性决定了错误提示的显示位置，可选值包括 qtip（鼠标悬浮时显示）、title（浏览器标题，实际效果与 qtip 相近）、under（控件下方显示）、side（右侧显示图标，鼠标悬停提示）以及 id（指定某个元素显示），开发者可根据实际需求灵活选择。

接下来，我们逐一解析常见的验证方式。

1. 空值验证——最基础的校验防线

让某个字段禁止为空，只需配置两个参数：allowBlank:false 和 blankText。前者设为 false 表示不允许空值，后者用于自定义空值提示文字（默认显示 "This field is required!"）。以文本框为例，配置方式非常直观：

复制代码 代码如下:

var form1 = new Ext.form.FormPanel({
width:350,
renderTo:"form1",
title:"FormPanel",
defaults:{xtype:"textfield",inputType:"password"},
items:[
{fieldLabel:"不能为空",
allowBlank:false,
blankText:"不能为空",
id:"blanktest",
}
]
});

2. 内置 vtype——快速格式化验证

ExtJS 默认支持多种常见格式验证，例如邮箱、URL、字母等。只需在字段配置中设置 vtype 属性，即可自动完成校验。以下是一个邮箱验证的示例：

复制代码 代码如下:

items:[
{fieldLabel:"不能为空",
vtype:"email",
vtypeText:"不是有效的邮箱地址",
id:"blanktest",
anchor:"90%"
}

默认支持的 vtype 包括：alpha（仅允许字母）、alphanum（字母和数字）、email（邮箱格式）、url（URL 格式）。直接使用即可，无需手动编写正则表达式，非常便捷。

3. 自定义密码确认验证

当内置验证无法满足需求时，自行扩展也很简单。例如，要求两个密码框输入内容一致，可以添加自定义 vtype：

复制代码 代码如下:

Ext.apply(Ext.form.VTypes,{
password:function(val,field){
if(field.confirmTo){
var pwd=Ext.get(field.confirmTo);
return (val==pwd.getValue());
}
return true;
}
});

items:[{fieldLabel:"密码",
id:"pass1",
},{
fieldLabel:"确认密码",
id:"pass2",
vtype:"password",
vtypeText:"两次密码不一致！",
confirmTo:"pass1",
}

这里用到了自定义配置项 confirmTo，它指向另一个组件的 id，验证时能获取对应输入框的值进行比较。实现思路清晰，代码简洁易维护。

4. 正则表达式——终极校验武器

当上述方式仍不够用时，直接使用正则表达式。通过 regex 属性定义规则，regexText 指定错误提示信息。例如，限制字段只能输入中文：

复制代码 代码如下:

new Ext.form.TextField({
fieldLabel : "姓名",
name : "author_nam",
regex : /[u4e00-u9fa5]/,
regexText:"只能输入中文!",
allowBlank : false
});

正则表达式写在 /.../ 之间，配合 allowBlank 等其他验证参数，能够组合出极为精细的校验逻辑，覆盖绝大多数复杂场景。

以上便是 ExtJS 表单验证的几种典型应用场景。从简单的空值检查到正则匹配，每一层都有对应的配置方案。在实际项目中，根据业务需求灵活组合这些验证方式，基本可以应对大多数校验要求。最后提醒一点：配置前务必开启 QuickTips，否则错误提示无法正常显示，影响用户体验。