validatefield详解

一、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只作用于表单字段、不支持异步验证、可以自定义验证规则和错误信息等问题。