Extjs表单常见验证小结

ExtJS表单验证是一个重要的功能，用于确保用户输入的数据符合预期格式和条件。以下是一些常见的ExtJS表单验证方法的小结：

### 1. 基本验证

- **空验证**：使用`allowBlank`属性来检查字段是否为空。如果设置为`false`，则字段不能为空。

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

- **长度验证**：使用`minLength`和`maxLength`属性来限制输入的最小和最大字符数。

  {
    xtype: 'textfield',
    fieldLabel: '密码',
    name: 'password',
    minLength: 6,
    maxLength: 20,
    minLengthText: '密码长度不能少于6个字符',
    maxLengthText: '密码长度不能超过20个字符'
  }
  

### 2. 使用vtype进行验证

ExtJS内置了一些常用的验证类型（vtype），如`email`、`url`、`alpha`、`alphanum`等。

- **邮箱验证**：

  {
    xtype: 'textfield',
    fieldLabel: '邮箱',
    name: 'email',
    vtype: 'email',
    vtypeText: '请输入有效的邮箱地址'
  }
  

- **URL验证**：

  {
    xtype: 'textfield',
    fieldLabel: '网址',
    name: 'url',
    vtype: 'url',
    vtypeText: '请输入有效的URL地址'
  }
  

### 3. 正则表达式验证

对于复杂的验证规则，可以使用正则表达式（regex）进行验证。

- **手机号码验证**（以13开头的11位数字）：

  {
    xtype: 'textfield',
    fieldLabel: '手机号码',
    name: 'phone',
    regex: /^13\d{9}$/,
    regexText: '手机号码必须是以13开头的11位数字'
  }
  

- **只能输入汉字**：

  {
    xtype: 'textfield',
    fieldLabel: '姓名',
    name: 'name',
    regex: /^[\u4e00-\u9fa5]+$/,
    regexText: '只能输入汉字'
  }
  

### 4. 自定义验证函数

当内置的vtype和正则表达式不能满足需求时，可以编写自定义的验证函数。

{
  xtype: 'textfield',
  fieldLabel: '自定义验证',
  name: 'custom',
  validator: function(value) {
    // 自定义验证逻辑
    if (value.length < 5) {
      return '输入值长度不能少于5个字符';
    }
    return true;
  }
}

### 5. 错误提示方式

通过`Ext.QuickTips.init()`和`Ext.form.Field.prototype.msgTarget`可以设置错误提示的显示方式。

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side'; // 在控件右边显示错误图标

以上就是ExtJS表单常见验证方法的小结。这些验证方法可以帮助你确保用户输入的数据符合预期，提升表单的健壮性和用户体验。