element-ui 表单校验总结
作为一名前端开发，会遇到各种各样的表单处理。为了给用户更好的体验，行内表单校验及错误展示被广泛使用。由于工作中用到element-ui较多，所以这里简单谈一谈日常工作遇到的【有意思】的表单交互。
element-ui官网链接： https://element.eleme.cn/#/zh-CN/component/form, 简单的表单校验可以直接参考官网套着用
实现原理
- 基于 el-form-item 下面的表单项做校验，而不是基于 prop
- 嵌套校验为啥需要”…“字符串拼接的语法
一行多交互框
这种交互的特点是同一个label下有多个关联的输入框，改变的时候需要校验彼此
// template
<el-form-itemlabel="区间":rules="[{ validator: numValidator, trigger: ['blur', 'change'] }]"><el-input-numberv-model="form.values.min" /> ~<el-input-numberv-model="form.values.max" />
</el-form-item>// script
{data() {return {form: {values: {min: 0,max: 10}}}},methods: {numValidator(rule, value, callback) {const { min, max } = this.form.values;if (min > max) {callback(new Error(""));return;}callback();}}
}
多行多交互框
这种交互是上一个的升级版，放在这里单独拿出来，是为了突出一下 validator 传参。基于validator传参可以更 优雅 的实现复用
// template
<el-form-itemlabel="区间1":rules="[{ validator: numValidator.bind(this, {text: '区间1'}), trigger: ['blur', 'change'] }]"><el-input-numberv-model="form.values1.min" /> ~<el-input-numberv-model="form.values1.max" />
</el-form-item>
<el-form-itemlabel="区间2":rules="[{ validator: numValidator.bind(this, {text: '区间2'}),, trigger: ['blur', 'change'] }]"><el-input-numberv-model="form.values2.min" /> ~<el-input-numberv-model="form.values2.max" />
</el-form-item>// script
{data() {return {form: {values1: {min: 0,max: 10},values2: {min: 0,max: 10}}}},methods: {numValidator({text}, rule, value, callback) {const { min, max } = this.form.values;if (min > max) {callback(new Error(`${text}开始限制不能大于结束限制`));return;}callback();}}
}
循环嵌套表单
这种也很常见，表单的数量不定，表单下的交互项数量也不定
// script
forms: [{name: '',children: [{key1: '',key2: ''},{key1: '',key2: ''},]},{name: '',children: [{key1: '',key2: ''}]},
]// template
<template v-for="form in forms"><el-form:model="form"><el-form-item label="名称"prop="name"><el-input v-model="form.name" /> </el-form-item><template v-for="(item, idx) in form.children"><el-form-item :label="'字段1_' + (idx + 1)":prop="'form.children.' + idx + '.key1'":rules="[{ required: true, message: '字段不能为空', trigger: ['change', 'blur'] }]"><el-input v-model="item.key1" /> </el-form-item><el-form-item :label="'字段2_' + (idx + 1)":prop="'form.children.' + idx + '.key2'":rules="[{ required: true, message: '字段不能为空', trigger: ['change', 'blur'] }]"><el-input v-model="item.key2" /> </el-form-item></template></el-form></template>
)
)
)
