[element plus] vue3动态表单验证

动态表单验证，不能使用如下格式：

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
2
3
4
5
6
7
8
9
10
11
12
13
14

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;
	},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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
3
4
5
6
7
8

1.2、formItem 格式

export const formItem = [
	{
		id: "1",
		col: 12,
		label: "测试label",
		prop: "name1",
		type: "input",
		maxlength: 100,
		required: true,
		placeholder: "请输入测试label",
		options: [],
	}
]
1
2
3
4
5
6
7
8
9
10
11
12
13

1.3、formData 格式

data() {
	return {
		formData: {
			name1: "",
		},
	}
}
1
2
3
4
5
6
7

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33