Vue+Element 动态表单自定义正则表达式验证

使用场景

宏命令输入验证，宏命令格式如下：{$xxx}，xxx暂为任意字母、数字、下划线组合的字符串，但{$}是固定的格式。

动态表单验证需要用到prop属性，可参考官方文档：动态增减表单项

局部代码如下

<template>
	<el-form :model="add_host_Form" size="small">
		<el-form-item label="macros">
			<el-row style="font-size: 13px" v-for="(item, index) in add_host_Form.macros" :key="index">
				<el-col :span="7">
					<el-form-item :prop="'macros.' + index + '.macro'" :rules="macro_rules">
						<el-input v-model="item.macro" size="small" style="width: 92%" placeholder="{$MACRO}"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					略
				</el-col>
				<el-col :span="7">
					略
				</el-col>
				<el-col :span="2">
					<el-button @click="add_host_Form.macros.splice(index, 1)" type="danger" icon="el-icon-minus" style="padding: 2px 5px"></el-button>
				</el-col>
			</el-row>
		</el-form-item>
		<el-form-item>
			<span style="cursor: pointer; color: #409eff" @click="addMacros()">&nbsp;添加</span>
		</el-form-item>
	</el-form>
</template>

<script>
	export default {
		data() {
			// 宏命令格式，表单验证
			var checkMacros = (rule, value, callback) => {
				if (value) {
					if (/^\{\$\w+}$/g.test(value)) {
						callback();
					} else {
						callback(new Error("宏命令格式不正确，参考格式{$xxx}"));
					}
				}
				callback();
			};
			return {
				add_host_Form: {
					macros: []
				},
				macro_rules: [{
						required: true,
						message: "宏命令不能为空",
						trigger: "blur",
					},
					{
						validator: checkMacros,
						trigger: "blur"
					},
				],
			}
		},
		methods: {
			addMacros() {
				this.add_host_Form.macros.push({
					macro: ""
				});
			}
		}
	}
</script>

截图如下