Element ui form 动态表单校验的方法

前言

• 在项目中总遇到重复利用的情况，尤其在UI框架、功能模板
• 而在利用 Element ui 表单时；还有自带校验功能，校验分为原框架自带的校验规则、自己自定义的校验规则
• 下面就说一下，普通校验和动态表单的检验方案

普通的校验

个体校验

• model
• prop
• rules
• 必带以上三种属性

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
	<el-form-item
	    prop="email"
	    label="邮箱"
	    :rules="[
	      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
	      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
	    ]"
	>
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>
</el-form>

集体校验

• model
• prop
• rules
• 必带以上三种属性，但是 rules 校验规则是写在一起，格式：[ name : rules ，name : rules …]

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
	<el-form-item
	    prop="email"
	    label="邮箱"
	    :rules="rus"
	>
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>
</el-form>
data(){
	return {
		rus:{
			email : [
	      		{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
		      	{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
		    ]
		}
	}
}

动态校验

• model
• prop
• rules
• 还是以上三个属性，但在 Prop 上有所不同，因校验原理在于，校验规则知道比较哪些值，而动态校验上，值是获取了，但是在动态表单上；校验规则匹配不上哪个需校验对象，从而在首次校验上会出现校验失效的情况。
• 解决办法是给 prop 加上指定值的规则而不再是原先的固定 name 了，如 ：‘数组**.’ + index + '.**value’

<template v-for="(fm,i) in data.list">
    <el-form-item 
        :label="fm.nm + '：'" 
        :key="i" 
        :label-width=" textVal(fm.nm) +'px'" 
        :prop="'list.'+ i +'.va'" :rules="fm.ru ? fm.ru : []"
    >
	</el-form-item>
</template>

集合校验

interviewRules:{
  va:[{required: true, message: '请选择职位', trigger: 'change'}]
},

打算做个通用的 form 表单组件，让我们用 Json 字段控制表单显示，附带个插件地址：

https://www.npmjs.com/package/tooua

如有不全之处，有请留言指教哈。