element框架动态增减表单验证

   在项目开发中，对于element表单验证的情况可谓是数不胜数，今天教给大家的是实时表单验证，顾名思义就是不把表单验证的rules写死，而是具体情况具体判断，进行表单验证的增加和删减。

 (1)首先展示element官网的固定表单验证：

<el-form :model=“ruleForm” :rules=“rules” ref="ruleForm"label-width=“100px” class=“demo-ruleForm”>

 (2)业务需求：

  假设设置了某条件，或者是点击了某值，导致表单发生变化，需要验证的数据也需要变化，这时候表单里固定写死的验证数据就会显得“驴唇不对马嘴”。

 (3)解决办法：

一：在表单设置rules的时候进行条件判断，例：

<el-form :model=“ruleForm” :rules=“ showEnOrCh ？ rules ： rulesNoage” ref="ruleForm"label-width=“100px” class=“demo-ruleForm”>

rulesNoage:{
 pass: [
  { validator: validatePass, trigger: ‘blur’ }
  ],
 checkPass: [
  { validator: validatePass2, trigger: ‘blur’ }
 ],
}`

二：在具体需要操作的表单项，进行动态设置：例：

  <el-form-item label="年龄" prop="age" :rules='showEnOrCh ? [{validator: checkAge, trigger: 'blur'}] : null'>
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>