动态表单验证,不能使用如下格式:
message
与validator
不能同时使用,所以采用:rules="setValidatorRules(val)"
逻辑处理方式。
<el-form-item
prop="email"
label="Email"
:rules="[
{
required: true,
message: 'Please input email address',
trigger: 'blur',
validator: xxx
}
]"
>
<el-input v-model="dynamicValidateForm.email" />
</el-form-item>
1.1、:rules="setValidatorRules(val)"
逻辑
message
与 validator
不能同时使用
import { verifyPhone } from 'xxx'
methods: {
setValidatorRules(val) {
const rules = {
required: val.required,
trigger: val.type === "input" ? "blur" : "change",
};
if (val.prop === "name1") {
rules.validator = verifyPhone;
} else {
rules.message = val.placeholder;
}
return rules;
},
}
verifyPhone
格式,参考 element-plus form 自定义校验规则
// 手机号码验证
export function verifyPhone(rule, value, callback) {
let reg = /^((12[0-9])|(13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0|1,5-9]))\d{8}$/
if(!reg.test(value)){
return callback(new Error('请输入正确的手机号码'))
}
callback()
}
1.2、formItem
格式
export const formItem = [
{
id: "1",
col: 12,
label: "测试label",
prop: "name1",
type: "input",
maxlength: 100,
required: true,
placeholder: "请输入测试label",
options: [],
}
]
1.3、formData
格式
data() {
return {
formData: {
name1: "",
},
}
}
1.4、html
格式
<el-form ref="formRef" label-width="110px" :model="formData">
<el-row :gutter="15">
<el-col :span="val.col" v-for="val in formItem" :key="val.id">
<el-form-item
:label="val.label"
:prop="val.prop"
:rules="setValidatorRules(val)"
>
<el-input
v-if="val.type === 'input'"
v-model="formData[val.prop]"
:placeholder="val.placeholder"
:maxlength="val.maxlength"
show-word-limit
clearable
/>
<el-select
v-else-if="val.type === 'select'"
v-model="formData[val.prop]"
:placeholder="val.placeholder"
style="width: 100%"
>
<el-option
v-for="v in val.options"
:key="v.label"
:label="v.label"
:value="v.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>