vue3 elementUI 表单验证

滿2024-10-12 9:08

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

javascript 复制代码

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

2、动态生成校验

html 复制代码

     <div
         v-for="(item, index) in fillDataForm.fieldArray"
          :key="'options' + index"
          class="flex option-box"
        >
          <el-form-item
            label="选项名："
            :prop="'fieldArray.' + index + '.label'"
            :rules="rules"
          >
            <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>