Avue组件或Element

您所在的位置：网站首页 › 验证规则有哪些类型 › Avue组件或Element

Avue组件或Element

2024-07-13 16:42| 来源: 网络整理| 查看: 265

AVUE组件或el-form动态修改rules验证规则问题描述

根据条件修改验证规则:el-form中若A为空，则B可为空，若A有值，则B必填,动态改变B的验证规则

问题的解决原理 avue:

在watch监听事件中，使用auve-form自带的:defaults.sync="defaults"属性，来操作B的rules验证规则，此写法的效果好于el-form原生，因为设置为必填后会有必填标志*

el-form：

使用watch监听A值的变化，若A不为空，则操作B的验证规则（万金油） tip:如果使用select单选框组件，也可在单选框@change事件中操作B的验证规则（特殊）

代码如下 Avue组件中： //此处用applyType指代a ，taxNumber 指代B ... data(){ return{ defaults:{}, //avue配置项 modifyOption: { submitText:'修改申报', menuPosition:'right', size:"mini", labelWidth:150, emptyBtn:false, column: [ { label: '申报类型', prop: 'applyType', type: 'radio', span:24, rules: [{ required: true, message: "请选择申报类型", trigger: "blur" }], dicData: radioList }] } } } ... watch:{ 'modifyForm.applyType'(val){ if(val=== null || val === undefined || val === ''){ //此处绑定的rules规则参考默认绑定rules this.defaults.taxNumber.rules = [ {required: false, validator: validateCode1, trigger: "blur"} ] }else{ this.defaults.taxNumber.rules = [ {required: true, validator: validateCode1, trigger: "blur"} ] } } el-form原生组件中： ... export default{ data(){ return{ applyList :[{ label:'公司', value:0 },{ label:'分公司', value:1 }], //rules中要先声明一个不必填，否则下面的this.rules.taxNumber取不到 rules: { applyPark: [ {required: true, message: "请选择申报类型", trigger: "blur"}, ], taxNumber: [ {required: false, message: "请输入社会统一信用代码", trigger: "blur"}, ], } } }, methods:{ changeApplyPark(){ if(this.form.applyPark === null || this.form.applyPark === undefined || this.form.applyPark === ''){ this.rules.taxNumber = [ {required: false, message: "请输入社会统一信用代码", trigger: "blur"} ] }else{ this.rules.taxNumber = [ {required: true, message: "请输入社会统一信用代码", trigger: "blur"} ] } } } }

【本文地址】

Avue组件或Element

Avue组件或Element

今日新闻

推荐新闻