Element Plus 表单校验需满足四条件：el-form 绑定 model 和 rules；每项用 el-form-item 包裹；prop 值匹配字段路径；rules 中存在同名规则数组。
Element Plus 的表单校验是声明式、可配置的，核心靠 :rules 三者协同工作。用对了结构和绑定方式，字段级校验就能自动触发、反馈清晰。
必须满足四个条件才能让某个字段被校验
- 表单容器
:model（数据源）和:rules（规则对象） - 每个输入项外层包裹
-
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-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="form.email"></el-input></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→ - 对象深层：
userInfo.contact.phone→prop="userInfo.contact.phone" - 注意不要漏掉引号，且
prop值必须是字符串字面量或模板字符串
自定义校验逻辑怎么写？
用 validator 函数替代 required 或 pattern，必须调用 callback() 结束校验：
蓝湖代码转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.
password: [{
validator: (rule, value, callback) => {
if (!value) {
callback(new Error('密码不能为空'))
} else if (value.length <p><strong>触发校验的两种常用方式</strong></p>
- 提交时全量校验：
formRef.value.validate()，返回 Promise，建议await - 单字段手动校验：
formRef.value.validateField('username')
样式小贴士：避免错误信息被截断
表格内嵌表单项时，.el-form-item__error 可能因单元格高度不够而显示不全。加一句 CSS 即可：
.table-form-item {
padding: 12px 0;
}
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
