elementui检验
ElementUI 表单验证方法
ElementUI 提供了强大的表单验证功能，基于 async-validator 实现。以下为常用验证方式：
基础表单验证
在 el-form 上绑定 :rules 属性，并在 el-form-item 上设置 prop 属性匹配规则：
<el-form :model="form" :rules="rules" ref="formRef">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
</el-form>rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
}自定义验证规则 通过 validator 函数实现复杂验证逻辑：
const validatePassword = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入密码'));
} else if (value.length < 6) {
callback(new Error('密码不能少于6位'));
} else {
callback();
}
};
rules: {
password: [{ validator: validatePassword, trigger: 'blur' }]
}动态表单验证 对动态生成的表单项，需在 rules 对象中预先定义对应字段的规则：
rules: {
dynamicItem: [{ required: true, message: '动态项必填', trigger: 'blur' }]
}表单提交验证 通过 ref 调用 validate 方法进行整体验证：
methods: {
submitForm() {
this.$refs.formRef.validate(valid => {
if (valid) {
// 验证通过
} else {
// 验证失败
}
});
}
}验证触发方式
trigger: 'blur'：失去焦点时触发trigger: 'change'：值变化时触发- 可组合使用：
trigger: ['blur', 'change']
常用验证规则
| 规则 | 示例 | 说明 |
|---|---|---|
| required | { required: true } |
必填项 |
| min/max | { min: 6, max: 20 } |
长度限制 |
| pattern | { pattern: /^[a-z]+$/ } |
正则匹配 |
| type | { type: 'email' } |
内置类型校验 |
| validator | { validator: func } |
自定义验证函数 |
清除验证结果
// 清除全部验证
this.$refs.formRef.clearValidate();
// 清除特定字段验证
this.$refs.formRef.clearValidate('fieldName');异步验证示例
async validateField() {
try {
await this.$refs.formRef.validateField('username');
// 验证通过处理
} catch (error) {
// 验证失败处理
}
}注意事项
- el-form 的 model 属性必须与表单数据对象绑定
- el-form-item 的 prop 属性值需与 rules 中的字段名一致
- 动态表单字段需在 rules 中预先定义对应规则
- 自定义验证函数必须执行 callback()
