elementui validate
ElementUI 表单验证
ElementUI 提供了强大的表单验证功能，基于 async-validator 实现。通过 rules 属性定义验证规则，结合 el-form 和 el-form-item 组件实现验证逻辑。
基本用法
在 el-form 上绑定 model 和 rules 属性，在 el-form-item 上设置 prop 属性对应 model 的字段名。
<template>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
}
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
alert('验证通过')
} else {
return false
}
})
}
}
}
</script>验证规则配置
验证规则是一个对象数组，每个规则对象包含以下常用属性：
required: 是否必填message: 错误提示信息trigger: 触发方式（blur/change）min/max: 最小/最大长度type: 数据类型（string/number/boolean/...）pattern: 正则表达式validator: 自定义验证函数
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ validator: (rule, value, callback) => {
if (value.length < 3) {
callback(new Error('长度不能小于3'))
} else {
callback()
}
}, trigger: 'blur' }
]
}动态表单验证
对于动态生成的表单项，需要为每个表单项指定唯一的 prop 路径：
<el-form-item
v-for="(item, index) in dynamicItems"
:key="index"
:prop="'items.' + index + '.value'"
:rules="{
required: true,
message: '不能为空',
trigger: 'blur'
}"
>
<el-input v-model="item.value"></el-input>
</el-form-item>表单重置与清除验证
使用表单实例的方法控制验证状态：
// 重置表单
this.$refs.form.resetFields()
// 清除验证
this.$refs.form.clearValidate()
// 验证特定字段
this.$refs.form.validateField('username')自定义验证
通过 validator 函数实现复杂验证逻辑：
rules: {
password: [
{ validator: (rule, value, callback) => {
if (!value) {
return callback(new Error('密码不能为空'))
}
if (!/^(?=.*[a-z])(?=.*[A-Z]).{6,}$/.test(value)) {
return callback(new Error('必须包含大小写字母且至少6位'))
}
callback()
}, trigger: 'blur' }
]
}表单验证事件
el-form 提供 validate 事件监听验证结果：
<el-form @validate="onValidate">
<!-- 表单内容 -->
</el-form>methods: {
onValidate(prop, isValid, message) {
console.log(prop, isValid, message)
}
}
