vue elementUI 表单验证

正则表达式

1、前端配置正则表达式入数据库，前端表单反显校验

 <script>
    const rgxFunc = new RegExp(item.fieldRegexp.trim());
   // eslint-disable-next-line no-eval
   console.log('正则表达式', rgxFunc);
   console.log('正则表达式', rgxFunc.test('中文'));
   rules.push({
      message: item.regexpTip || '请输入正确格式',
      pattern: rgxFunc
   });
</script>

2、动态生成校验

     <div
         v-for="(item, index) in fillDataForm.fieldArray"
          :key="'options' + index"
          class="flex option-box"
        >
          <el-form-item
            label="选项名："
            :prop="'fieldArray.' + index + '.label'"
            :rules="[{ required: true, message: '必填项', trigger: 'blur' }]"
          >
            <el-input
              v-model="item.label"
              maxlength="15"
              show-word-limit
              clearable
            />
          </el-form-item>
          <el-form-item
            label="选项值："
            :prop="'fieldArray.' + index + '.value'"
            :rules="[{ required: true, message: '必填项', trigger: 'blur' }]"
          >
            <el-input
              v-model="item.value"
              maxlength="15"
              show-word-limit
              clearable
            />
          </el-form-item>
          <div class="delete-icon" @click="deleteOption(index)">
            <i class="el-icon-delete"></i>
          </div>
        </div>