element-ui 表单，根据不同的条件，添加动态表单校验功能

element-ui 表单，根据不同的条件，添加动态表单校验功能

需求：
1.当点击下载按钮时，执行校验规则一；
2.当点击确认按钮时，执行检验规则二；
3.如果国籍选中 A || B || C 时，执行校验规则三；

A.表单代码如下：

<el-form  ref="form" :model="detail" :rules="rulesList" label-position="right" label-width="210px">
   <el-form-item label="英文姓名：" prop="ywxm">
     <el-input  v-model="detail.ywxm" :value="detail.ywxm" ></el-input>
   </el-form-item>
   <el-form-item label="中文姓名：" prop="zwxm">
     <el-input  v-model="detail.zwxm" :value="detail.zwxm" ></el-input>
   </el-form-item>
   <el-form-item label="有延期至：" prop="yxq">
     <el-date-picker v-model="detail.yxq" type="date" value-format="yyyyMMdd" format="yyyy 年 MM 月 dd 日"></el-date-picker>
   </el-form-item>
   <el-form-item label="在华地址：" prop="zhdz">
     <el-input  v-model="detail.zhdz"></el-input>
   </el-form-item>
</el-form>
<div class="btn" @click="sureClick()">确认</div>
<div class="btn" @click="download()">下载</div>

B.data数据项校验规则代码如下：

data(){
	return{
		rules1:{ // 常规确认
			yxq:[{required:true,trigger:"blur",message:'有延期至不能为空'}],
			ywxm:[{required:true,trigger:"blur",message:'英文姓名不能为空'}],
			zhdz:[{required:true,trigger:"blur",message:'在华地址不能为空'}],
		},
		rules2:{ // 模板下载
	        yxq:[{required:true,trigger:"blur",message:'有延期至不能为空'}],
	        zhdz:[{required:true,trigger:"blur",message:'在华地址不能为空'}],
       },
		rules3:{ // 特殊中文姓名
			yxq:[{required:true,trigger:"blur",message:'有延期至不能为空'}],
			ywxm:[{required:true,trigger:"blur",message:'英文姓名不能为空'}],
			zhdz:[{required:true,trigger:"blur",message:'在华地址不能为空'}],
			zwxm:[{required:true,trigger:"blur",message:'中文姓名不能为空'}],
		},
		isxz:false, // 控制不同的点击事件
	}
}

C, 通过计算属性监听 rulesList 变量

在这里插入代码片
computed:{
  rulesList:function(){
    if(this.isxz){ //模板下载
      return this.rules2
    }else if(this.detail.gj=='KOR'||this.detail.gj=='JPN'||this.detail.rydylb=='O'){ // 特殊中文姓名
      return this.rules3
    }else{ // 常规确认
      return this.rules1
    }
  }
},
methods:{
	sureClick(){ // 确认
		this.isxz=false
	},
	download(){ // 模板下载
		this.isxz=true
	}
}