需求

默认情况下，它是强制的

当你下拉选择，

选择必需，活动名称是必需的，需要检查和显示*

选择不需要，不验证活动名称，并隐藏*

初始检查规则

经过测试，网上其他方式都没有实现需求，规则中要求的动态切换没有效果

因为按照下面的写法，element-ui的验证规则是组件初始化后敲定的，切换是没有用的

rule : { name :[{ required d : true，message: '请输入名称'，trigger: '模糊' } ]}，region :[{ required d : true，message: '请选择类型'，trigger3360 '模糊' }。

第一步：

删除规则中需要动态验证的字段规则

删除名称

规则： { region :[{ required : true，message: '请选择类型'，trigger: 'blur'} ]}步骤2:

在字段为名称的表单项上，添加所需的属性

以下代码是一个新字段，根据下拉框中选择的值来判断它是真还是假

El-form-item label=' activity name ' prop=' name ' : required=' is havent ' El-input v-model=' rule form。名称'/El-输入/El-表单-项目步骤3:

计算属性，添加字段为否决

下拉选择框不一定是1，但其他都是必需的，包括默认值

El-form-item label=' activity name ' prop=' name ' : required=' is havent ' El-input v-model=' rule form。名称/El-输入/El-表单-项目如下：

下拉开关，*显示，提交时有不同的规则

注意，新的问题来了

当选择必需时，没有以前的错误提示文本，而是元素带来的提示

第四步：

设置错误提示

使用自定义函数来控制流程

将名称字段重新添加到规则中

注意函数{validator: validateName}

rule : { name :[{ validator : validateName }]，region :[{ required d 3360 true，message: '请选择类型'，trigger3360' blur'}]}然后设置validate name函数

如您所见，当需要时，遵循我们设置的提示，当不需要时，验证通过

粘贴代码

Data() {//用于验证活动名称的函数让validate name=(规则、值、回调)={//当活动名称为null且为必需时，将引发错误，否则，如果(这。ruleform.name===' ' this。is havent){回调(新错误('请输入活动名称')已验证。} else { callback()；} };返回{ ruleForm: { name: ' '，region: '' }，Rules : { name :[{ validator : validate name }]，Region: [{required: true，message: '请选择类型'，trigger : ' blur ' }]} }；}，完整的演示代码

演示使用vue-cli并引入了元素-ui

核心代码参考如下：

模板div El-form :模型='规则表单' :规则='规则' ref='规则表单'标签-宽度=' 100px ' class='演示-规则表单' El-form-项目标签='活动名称prop=' name ' :必需=' Ishavent ' El-input v-model=' Ruleform。'名称'/El-输入/El-表单-项目El-表单-项目标签='活动区域prop=' region ' El-select v-model=' Ruleform。区域“占位符=”请选择活动区域样式='宽度：100% ' El-option标签='必填值='0'/el-option el-option标签='非必填value=' 1 '/El-option/El-select/El-FORm-item El-FORm-item El-button type=' primary ' @ click=' Submit FORm '(' RuleFORm ')立即创建/El-按钮/El-表单-项目/El-表单/div/模板脚本导出默认值{ name: 'HelloWorld '，data() { //验证活动名称的函数让validateName=(规则、值、回调)={ //当活动名称为空值且为必填时，抛出错误，反之通过校验如果(这个。规则形式。name==='这个。ishavatin){回调(新错误('请输入活动名称'));} else { callback()；} };返回{ ruleForm: { name: ' '，region: '' }，Rules : { name :[{ validator : validate name }]，region: [ { required: true，message: '请选择类型，触发器： ' blur ' }]} }；}，计算出： { is havet : function(){ return this。规则形式。地区！==`1`;}，方法： {提交表单(formName){这.$refs[formName].验证（有效={如果（有效){控制台。日志(` 0已提交表单`);} else { console.log('错误提交！');返回false } })；} }};/script以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。