您现在的位置是：网站首页> 编程资料编程资料

使用ElementUI循环生成的Form表单添加校验_vue.js_

2023-05-24 289人已围观

简介使用ElementUI循环生成的Form表单添加校验_vue.js_

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: "请选择对应的选项"                  }              }              ]  },