ElementUI循环生成的Form表单添加校验
ElementUI 中使用循环生成的form表单需要动态添加校验的规则
在data中定义好需要的rule,使用Element的语法给 :rules 动态绑定
:prop="getAllTableData.${i}.value"
getAllTableData是v-for绑定的数组,i是索引,value是表单绑定的v-model的名称
HTML代码片段
// An highlighted block
VUE中data中的声明
getAllFormData: { getAllTableData: [ { labelName: "规则ID", value: "", propName: "ruleid", disabled: true, hidden: true, // 规则必须也得定义在form绑定的model中 rule: { required: false } }, { labelName: "编码", value: "", propName: "code", rule: { // ElementUI 表单校验规则的语法 validator: (rule, value, callback) => { if (value == "") { callback(); } else { // 采用正则表达式进行判断 let reg = /[\u4E00-\u9FA5\uF900-\uFA2D]/; if (reg.test(value)) { callback(new Error("请输入英文或数字")); } else { callback(); } } }, trigger: "blur" } }, { labelName: "名称", value: "", propName: "name", rule: {} }, { labelName: "审核类别", value: "", propName: "typename", rule: {} }, { labelName: "字段名称", value: "", propName: "fieldcode", rule: {} }, { labelName: "备注", value: "", propName: "memo", rule: {} }, { labelName: "评分", value: "", propName: "mark", prop: "mark", rule: { required: true, validator: (rule, value, callback) => { if (value == "") { callback(new Error("请输入数字")); } else { let reg = /^[0-9]+([.]{1}[0-9]{1})?$/; if (!reg.test(value) || value > 100) { callback(new Error("请输入0-100的有效数字,可保留一位小数")); } else { callback(); } } }, trigger: "blur" } }, { labelName: "警告标识", value: "", propName: "warnsign", prop: "warnsign", selectFlag: true, selectOption: [ { value: "0", label: "否" }, { value: "1", label: "是" } ], rule: { required: true, message: "请选择对应的选项" } } ] },
效果图
required: true,说明该内容是必须填写的
正则表达式可以自定义项目需求的样式
ElementUI循环动态生成表单校验问题
删除 提交 新增专利号 重置
注意:循环的是文本框,它隶属于form 表单,form 表单绑定的是upsertForm ,所以,它的对象必须要在upsertForm 里面,才能生效
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。