一、问题描述

这里由一个动态切换规则校验引发的一些问题,整理了下,如下文所示。

1.动态绑定规则校验

这里有个需求就是,动态切换radio,对input输入框校验,界面如下



在网上找了一圈,用了第一种方法来解决,动态添加验证规则,方法如下

          <el-form-item label="授权密匙(Key)" v-if="form.value.platformType === 2" prop="value.hundredApiKey" :rules="form.value.platformType === 2 ? rules.hundredApiKey:[{ required: false}]">            <el-col :span="10">              <el-input v-model="form.value.hundredApiKey" placeholder="请输入授权密匙(Key)" />            </el-col>          </el-form-item>

通过if判断platformType是否等于2,然后添加规则,rules.hundredApiKey和required: false,后面看网上说的,直接通过v-if就能实现动态的效果,不需要后面再通过:rules方式添加,不显示控件该规则默认就失效。

      // 表单校验      rules: {        hundredApiKey: [{ required: true, message: "快递100 API Key不能为空", trigger: ['blur','change']}]      }

2.rules与form绑定的问题

这里又遇到了其他问题,就是输入明明有值,硬是提示,输入的值不能为空,可按如下步骤排除:

:model="ruleForm" 绑定的ruleForm值是否挂载成功并且操作的是否是这个表单。:rules="rules" 校验的规则格式绑定的rules是否定义并且格式正确为对象数组。el-form-item中的prop="name"是否和rules中的name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, ], 的名称一致,两个name是相同的,element的校验就是根据这个prop找对应的输入框的。<el-input v-model="ruleForm.name"></el-input> 的v-model="ruleForm.name"确保对象ruleForm中有name这个属性!

注意:

如果你的rules和form绑定的数据层级是一样的话,如下所示

<el-form :model="form" :rules="rules" ref="form">    <el-form-item label="选项:" prop="name">      <el-select v-model="form.name">        <el-option label="测试一" value="1"></el-option>        <el-option label="测试二" value="2"></el-option>      </el-select>    </el-form-item></el-form> form:{name:'',},rules:{    name:[{required: true, message: '请选择', trigger: 'blur'}]}

上面的绑定就没问题,我这用的是如下的格式

form:{a:{name:'',}},

a对象里有个name的属性,用上面的方式绑定,死活不行,正确的方式如下,有两种解决方案:

解决方案1:在规则定义与绑定时,规则结构 与 数据结构一致

<el-form :model="form" :rules="rules" ref="form">    <el-form-item label="选项:" prop="a.name">      <el-select v-model="form.a.name">        <el-option label="测试一" value="1"></el-option>        <el-option label="测试二" value="2"></el-option>      </el-select>    </el-form-item></el-form> form:{a:{name:'',}},rules:{    'a.name':[{required: true, message: '请选择', trigger: 'blur'}]}

解决方案2:将表单绑定的数据对象修改成对象的子对象。

<el-form :model="form.a" :rules="rules" ref="form">    <el-form-item label="选项:" prop="name">      <el-select v-model="form.a.name">        <el-option label="测试一" value="1"></el-option>        <el-option label="测试二" value="2"></el-option>      </el-select>    </el-form-item></el-form> form:{a:{name:'',}},rules:{    name:[{required: true, message: '请选择', trigger: 'blur'}]}

3.rules校验使用v-if无效

上面的表单里如果有多个组件,只有一个有效,其他的校验规则全都无效。

<el-form-item label="选项:" prop="name">

这个问题,搞了我好久,后面调试的过程中发现了这个规律,在网上找出了答案,只需要添加key属性就行了

<el-form-item label="选项:" prop="name" key="name">