elementui验证
表单验证基础
Element UI 提供了强大的表单验证功能，基于 async-validator 实现。在 el-form 组件上绑定 model 和 rules 属性即可启用验证。
<el-form :model="formData" :rules="rules" ref="form">
<el-form-item label="用户名" prop="username">
<el-input v-model="formData.username"></el-input>
</el-form-item>
</el-form>验证规则配置
rules 对象中每个属性对应表单字段的验证规则。支持 required、pattern、min/max 等多种验证类型。
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
email: [
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]
}自定义验证函数
对于复杂验证逻辑，可以使用 validator 函数实现自定义验证。该函数接收 rule、value 和 callback 参数。
rules: {
password: [
{ validator: (rule, value, callback) => {
if (!/[A-Z]/.test(value)) {
callback(new Error('必须包含大写字母'))
} else {
callback()
}
}, trigger: 'blur' }
]
}表单提交验证
在提交表单时调用 validate 方法进行整体验证。该方法返回 Promise 对象。
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 验证通过，提交表单
} else {
// 验证失败
}
})
}
}动态表单验证
对于动态生成的表单字段，可以使用动态规则。通过 v-for 渲染表单项时，prop 需要使用动态路径。
<el-form-item
v-for="(item, index) in dynamicItems"
:prop="'items.' + index + '.value'"
:rules="{ required: true }"
>
<el-input v-model="item.value"></el-input>
</el-form-item>重置表单验证
调用 resetFields 方法可以重置表单字段值并清除验证状态。clearValidate 方法仅清除验证状态而不重置值。
this.$refs.form.resetFields()
this.$refs.form.clearValidate()表单验证事件
Element UI 表单组件提供了多个验证相关事件，如 validate 事件会在某个表单项验证后触发。
<el-form @validate="onValidate">
<el-form-item prop="field" @change="onFieldChange">
<!-- 表单项内容 -->
</el-form-item>
</el-form>
