先看一张图,这是一个新增/编辑客户页面,截取了一部分。🚗车辆信息允许添加多个,字段标红✳星号的字段为必填项,如果有输入车架号,则验证车架号由字母数字组成,长度是17位数。

使用vue+element-ui开发,vue模板如下:

对应数据模型如下:
export const carInfo = {
modelId: '',
vinNo: '',
buyDate: '',
lastMaintenanceDate: '',
expiryTime: ''
}
export const ruleForm = {
name: '',
gender: 3, //未知
phone: '',
email: '',
employeeId: '',
tagIds: [],
carInfoList: [carInfo]
}
按照我们常规的干法,要验证某个字段,则在el-form-item组件加上prop属性,值为需要验证的字段即可。车架号的字段是vinNo,验证车架号,自然而然的写下了如下代码
<el-form-item label="车架号" prop="vinNo">
<el-input placeholder="请输入"
v-model.trim="item.vinNo"
maxlength="17"
class="custom-form-input"
/>
</el-form-item>
然鹅,这样写,正则校验validator跟本不会进入。。。
接着,翻看element-ui组件,会发现form-item组件也支持rules属性,那么针对这种复杂数据类型是不是要把rules绑定在form-item组件呢?

继续尝试
<el-form-item label="车架号" prop="vinNo" :rules="rules.vinNo">
<el-input placeholder="请输入"
v-model.trim="item.vinNo"
maxlength="17"
class="custom-form-input"
/>
</el-form-item>
此时,验证器validator的函数能进入了,不过,打印value,结果却是undefined。。。
为什么会这样?因为rule是跟prop绑定的,prop绑定不正确,那么验证器就无法获取到字段值。vinNo字段并不是ruleForm的直接属性,carInfoList才是ruleFrom的的最近属性,而vinNo是carInfoList对象数组的属性。
所以,prop的正确绑定方式是如下(看图2第88行代码):
<el-form-item label="车架号" :prop="`carInfoList[${index}].vinNo`" :rules="rules.vinNo">
<el-input placeholder="请输入"
v-model.trim="item.vinNo"
maxlength="17"
class="custom-form-input"
/>
</el-form-item>
这样element-ui复杂表单对象数据表单验证就成功了🎇🎇🎇。
发表评论