Los componentes AVUE o el-form modifican dinámicamente las reglas de validación de reglas
Descripción del problema
Modifique las reglas de validación de acuerdo con las condiciones: si A está vacío en el formulario el, entonces B puede estar vacío. Si A tiene un valor, entonces se requiere B. Cambie dinámicamente las reglas de validación de B.
Principios de resolución de problemas
despegar:
En el evento de escucha de vigilancia, utilice el atributo :defaults.sync="defaults" que viene con auve-form para operar las reglas de verificación de reglas de B. El efecto de este método de escritura es mejor que el de el-form nativo, porque hay será una bandera requerida*
el-form：
Use el reloj para monitorear los cambios en el valor de A. Si A no está vacío, opere las reglas de verificación de B (todo tipo de elixir).
Consejo: si usa el componente de botón de opción de selección, también puede operar las reglas de verificación de B en el evento @change del botón de radio (especial)
El código se muestra a continuación.
En el componente Avue:
//此处用applyType指代a ，taxNumber 指代B
<avue-form :defaults.sync="defaults" v-model="modifyForm" :option="modifyOption" @submit="modificationSubmission"></avue-form>
...
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"}
]
}
}
En componente nativo en forma el:
<el-form ref="ruleForm" :rules="rules" :model="form" label-width="220px">
<el-form-item label="申报园区：" prop="applyPark">
<el-select v-model="form.applyPark" placeholder="请选择" @change="changeApplyPark">
<el-option
v-for="item in applyList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="社会统一信用代码：" prop="taxNumber">
<el-input v-model="form.taxNumber"></el-input>
</el-form-item>
</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"}
]
}
}
}
}