Element UI rules的几种用法

Element UI rules的几种用法

Element UI 的 rules 属性主要用于表单验证，以下是几种常见的用法：

1. 基础验证：rules 属性可以接收一个对象，对象的键是表单项的 prop 值，值是一个包含验证规则的数组。例如，可以设置必填和长度限制的验证规则：

rules: {  
  username: [  
    { required: true, message: '请输入用户名', trigger: 'blur' },  
    { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符', trigger: 'blur' }  
  ]  
}

2. 自定义验证函数：除了预设的验证规则，你也可以在规则对象中定义一个 validator 函数来实现自定义验证。例如，可以编写一个函数来验证用户名是否已存在：

rules: {  
  username: [  
    { required: true, message: '请输入用户名', trigger: 'blur' },  
    { validator: (rule, value, callback) => {  
        // 检查用户名是否已存在的逻辑  
        if (exists) {  
          callback(new Error('用户名已存在'));  
        } else {  
          callback();  
        }  
      }, trigger: 'blur'  
    }  
  ]  
}

3. 表单项单独验证：可以为每个 el-form-item 单独设置 rules 属性，这样每个表单项都有自己的验证规则。例如：

<el-form>  
  <el-form-item :rules="{ required: true, message: '请输入用户名', trigger: 'blur' }"></el-form-item>  
</el-form>