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>