一、validatefield是什么？
validatefield是一个ExtJS表单组件中非常常用的验证方法，用于对表单中的字段进行验证，确保数据的正确性。这个方法是在表单提交前被调用，如果有字段不符合规定，表单将无法提交。在ExtJS中，可以通过继承Field这个基类来自定义validatefield方法的行为，比如自定义验证规则、自定义错误信息等等。
二、validatefield如何使用？
使用validatefield非常简单，只需要在表单字段定义时指定一个validator函数即可，如下例所示：
{
xtype: 'textfield',
fieldLabel: '用户名',
name: 'username',
allowBlank: false,
validator: function(value) {
if (value.length < 6) {
return '用户名长度不能少于6个字符';
} else {
return true;
}
}
}
在上面的代码中，我们定义了一个文本框，其name属性值为“username”，然后指定了一个validator函数，该函数用于验证文本框中输入的内容是否符合我们的要求。如果validator函数返回true，则代表当前字段验证通过；如果返回一个字符串，代表验证失败，并且该字符串会作为错误信息显示在页面上。
三、validatefield支持哪些验证规则？
validatefield支持的验证规则非常丰富，下面我们逐一介绍：
1. allowBlank
该规则用于检测是否允许当前字段为空。如果该值为true，则代表可以为空；如果为false，则代表不能为空。
2. email
该规则用于验证电子邮件地址格式是否正确，如下例所示：
{
xtype: 'textfield',
fieldLabel: '邮箱',
name: 'email',
vtype: 'email'
}
3. url
该规则用于验证URL地址是否格式正确，如下例所示：
{
xtype: 'textfield',
fieldLabel: '网址',
name: 'url',
vtype: 'url'
}
4. alpha
该规则用于验证输入的内容是否全部为字母，如下例所示：
{
xtype: 'textfield',
fieldLabel: '名称',
name: 'name',
vtype: 'alpha'
}
5. alphaNum
该规则用于验证输入的内容是否为字母或数字，如下例所示：
{
xtype: 'textfield',
fieldLabel: '编号',
name: 'code',
vtype: 'alphanum'
}
6. num
该规则用于验证输入的内容是否为数字，如下例所示：
{
xtype: 'textfield',
fieldLabel: '数量',
name: 'count',
vtype: 'num'
}
7. currency
该规则用于验证输入的内容是否为货币格式，如下例所示：
{
xtype: 'textfield',
fieldLabel: '价格',
name: 'price',
vtype: 'currency'
}
8. phone
该规则用于验证输入的内容是否为电话号码格式，如下例所示：
{
xtype: 'textfield',
fieldLabel: '电话号码',
name: 'phone',
vtype: 'phone'
}
9. password
该规则用于验证输入的内容是否为密码格式（要求同时包含数字、字母、特殊字符），如下例所示：
{
xtype: 'textfield',
fieldLabel: '密码',
inputType: 'password',
name: 'password',
vtype: 'password'
}
四、validatefield使用注意事项
虽然validatefield使用起来非常简单，但是在实际开发中还是需要注意一些问题的。
1. validatefield只作用于表单字段
validatefield只作用于表单中的字段，如果你想对整个表单进行验证，需要使用form的isValid方法，例如：
var form = Ext.create('Ext.form.Panel', {
...
buttons: [{
text: '提交',
handler: function() {
if (form.isValid()) {
form.submit();
}
}
}]
});
2. validatefield不支持异步验证
validatefield方法是同步的，也就是说在验证期间页面会被阻塞，如果需要使用异步验证，需要在提交表单时使用form的submit方法，并在提交完成后再进行验证。
3. validatefield支持自定义验证规则和错误信息
如果ExtJS默认提供的验证规则不能满足您的需求，您可以使用自定义验证规则。下面是一个例子：
{
xtype: 'textfield',
fieldLabel: '人口数量',
name: 'pop',
allowBlank: false,
validator: function(value) {
if (value.length != 6) {
return '人口数量必须是6位数';
} else if (value.charAt(0) != '1') {
return '人口数量必须以1开头';
} else {
return true;
}
}
}
在上面的代码中，我们自定义了一个验证规则，要求输入的内容必须为6位数字，且必须以1开头。如果验证失败，则会返回一个字符串，作为错误信息显示在页面上。
4. 错误信息可以动态指定
如果您希望动态指定当前表单字段的错误信息，可以通过修改表单字段的msgTarget属性来实现，如下例所示：
{
xtype: 'textfield',
fieldLabel: '用户名',
name: 'username',
allowBlank: false,
msgTarget: 'under',
validator: function(value) {
if (value.length < 6) {
return '用户名长度不能少于6个字符';
} else {
return true;
}
}
}
在上面的代码中，我们通过设置msgTarget属性值为“under”来指定错误信息显示在文本框下面。如果msgTarget属性值为“side”，则错误信息将会显示在文本框旁边。
五、总结
通过本文的介绍，我们了解到validatefield方法是一个非常常用的ExtJS表单验证方法。我们可以通过指定vtype属性值来使用ExtJS默认提供的验证规则，也可以通过修改validator函数来自定义验证规则。在使用过程中，我们需要注意validatefield只作用于表单字段、不支持异步验证、可以自定义验证规则和错误信息等问题。
