Element Plus 表单校验需满足四条件：el-form 绑定 model 和 rules；每项用 el-form-item 包裹；prop 值匹配字段路径；rules 中存在同名规则数组。
Element Plus 的表单校验是声明式、可配置的，核心靠 <el-form></el-form>、<el-form-item></el-form-item> 和 :rules 三者协同工作。用对了结构和绑定方式，字段级校验就能自动触发、反馈清晰。
必须满足四个条件才能让某个字段被校验
- 表单容器
<el-form></el-form>绑定了:model（数据源）和:rules（规则对象） - 每个输入项外层包裹
<el-form-item></el-form-item> -
<el-form-item></el-form-item>设置prop属性，值为model对象中对应字段的路径（如"username"或"userInfo.email"） -
:rules对象中存在同名 key，其值为校验规则数组
例如：
<el-form :model="form" :rules="rules" ref="formRef">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" />
</el-form-item>
</el-form>const form = reactive({
username: '',
email: ''
})
const rules = {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
]
}动态字段或嵌套字段怎么写 prop？
立即学习“前端免费学习笔记（深入）”；
- 数组项：
tableData[0].name→<el-form-item :prop="tableData[${index}].name"></el-form-item> - 对象深层：
userInfo.contact.phone→prop="userInfo.contact.phone" - 注意不要漏掉引号，且
prop值必须是字符串字面量或模板字符串
自定义校验逻辑怎么写？
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
用 validator 函数替代 required 或 pattern，必须调用 callback() 结束校验：
password: [{
validator: (rule, value, callback) => {
if (!value) {
callback(new Error('密码不能为空'))
} else if (value.length < 6) {
callback(new Error('密码至少6位'))
} else {
callback() // 必须调用，否则校验卡住
}
},
trigger: 'blur'
}]触发校验的两种常用方式
- 提交时全量校验：
formRef.value.validate()，返回 Promise，建议await - 单字段手动校验：
formRef.value.validateField('username')
样式小贴士：避免错误信息被截断
表格内嵌表单项时，.el-form-item__error 可能因单元格高度不够而显示不全。加一句 CSS 即可：
.table-form-item {
padding: 12px 0;
}不复杂但容易忽略。
