Extjs表单常见验证小结

接下来我将讲解“Extjs表单常见验证小结”的完整攻略，包含以下几个方面：

1. 表单验证的基本原理

在Extjs中，表单验证的基本原理是通过添加验证器（validator）或正则表达式（regex）来实现。当用户在表单中输入数据时，系统会根据设置的验证规则来检查数据是否符合要求。如果不符合要求，系统会提示错误信息。

1. 常见的表单验证

2.1 必填项验证

在Extjs中，必填项验证是最基本的验证之一。通过设置allowBlank属性为false，来实现表单必填项验证。例如：

{
    xtype:'textfield',
    name:'username',
    fieldLabel:'用户名',
    allowBlank:false,
    blankText:'用户名不能为空'
}

2.2 邮箱验证

在Extjs中，可以通过regex属性设置正则表达式来实现邮箱验证。例如：

{
    xtype:'textfield',
    name:'email',
    fieldLabel:'邮箱',
    regex:/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
    regexText:'请输入正确的邮箱'
}

2.3 手机号码验证

在Extjs中，可以通过regex属性设置正则表达式来实现手机号码验证。例如：

{
    xtype:'textfield',
    name:'mobile',
    fieldLabel:'手机号码',
    regex:/^1[34578]\d{9}$/,
    regexText:'请输入正确的手机号码'
}

1. 完整示例

下面是一个完整的示例，展示了如何在Extjs中实现表单验证：

Ext.create('Ext.form.Panel', {
    title: '用户注册',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        name: 'username',
        fieldLabel: '用户名',
        allowBlank: false,
        blankText: '用户名不能为空'
    }, {
        xtype: 'textfield',
        name: 'email',
        fieldLabel: '邮箱',
        vtype: 'email',
        vtypeText: '请输入正确的邮箱'
    }, {
        xtype: 'textfield',
        name: 'mobile',
        fieldLabel: '手机号码',
        regex: /^1[34578]\d{9}$/,
        regexText: '请输入正确的手机号码'
    }],
    buttons: [{
        text: '提交',
        formBind: true,
        handler: function() {
            // 提交表单
        }
    }]
});

以上就是“Extjs表单常见验证小结”的完整攻略。