element框架动态增减表单验证

最新推荐文章于 2024-03-21 20:00:38 发布

原创最新推荐文章于 2024-03-21 20:00:38 发布 · 512 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章介绍了在项目开发中如何使用Element进行实时表单验证，避免将验证规则硬编码。通过条件判断在表单设置时动态调整rules，或者在具体表单项上进行动态设置，以适应业务需求的变化，确保验证规则与表单内容一致。

在项目开发中，对于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>