vue表单校验，根据某选项追加或去掉校验

最新推荐文章于 2024-07-01 00:01:25 发布

mtreasure

最新推荐文章于 2024-07-01 00:01:25 发布

阅读量6.5k

点赞数 9

分类专栏： vue 文章标签： vue 表单

本文链接：https://blog.csdn.net/j123450/article/details/103050243

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

这是自己随便写的小测试，包括字段名取得都乱七八糟，敬请谅解。

需求

根据状态这个下拉框数据来判断经办人和日期是否需要校验，
状态值为在职时校验，状态值为离职时不校验。
在这里插入图片描述

实现代码

1.表单（正常校验处理）

  <el-form :model="editForm" label-width="115px" :rules="editFormRules" :disabled="editFormAble" ref="editForm"
          size="small">
          <el-col :span="12">
            <el-form-item label="状态" prop="value1">
               <el-select v-model="editForm.value1" @change="stateChange" size="mini" style='width:100%'>
                <el-option v-for="item in stateOpt" :key="item.code" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请单位" prop="value2">
              <el-input v-model="editForm.value2" size='mini'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请人" prop="value3">
              <el-input v-model="editForm.value3" size='mini'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经办人" prop="value4">
              <el-input v-model="editForm.value4" size='mini'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请日期" prop="value5">
              <el-date-picker v-model="editForm.value5" type="date" size="mini" format="yyyy-MM-dd"
                value-format="timestamp"></el-date-picker>
            </el-form-item>
          </el-col>
          
        </el-form>

data中（正常校验处理）

 editFormRules: {
            value1:[ {
            required: true,  //默认是否显示校验
            message: '请填写value2',
            trigger: 'blur'
            }],
            value2:[ {
            required: true,
            message: '请填写value2',
            trigger: 'blur'
            }],
            value3:[{
            required: true,
            message: '请填写value3',
            trigger: 'blur'
            }],
            value4:[{
            required: false,
            message: '请填写value4',
            trigger: 'blur'
            }],
            value5:[{
            required: false,
            message: '请填写value5',
            trigger: 'blur'
            }]
        },

3.methods【关键】

if(this.editForm.value1=="01"){
            this.editFormRules.value4[0].required = true;  //关键-将 required 改成true则校验，false 为不校验。
            this.editFormRules.value5[0].required = true;
        }else{
            this.editFormRules.value4[0].required = false;
            this.editFormRules.value5[0].required = false;
        }