vue的el-form-item循环检验rules
<!-- 车长泛化配置組件 -->
<template>
<div>
<el-form :model="tempData" inline v-for="(item, index) in tempData.truckToCargoRule" :key="index"
ref="truckToCargoRule" label-suffix=":">
<el-form-item label="泛化车长组" :prop="`truckToCargoRule.${index}.min`"
:rules="{ validator: validateMin, trigger: 'change' }">
<el-input v-model="item.to.min" @input="minInput(index)" placeholder="请输入内容" style="width: 120px;"></el-input>
</el-form-item>
<el-form-item>
到
</el-form-item>
<el-form-item :prop="`truckToCargoRule.${index}.max`" :rules="{ validator: validateMax, trigger: 'change' }">
<el-input v-model="item.to.max" @input="maxInput(index)" placeholder="请输入内容" style="width: 120px;"></el-input>
</el-form-item>
</el-form>
<el-button @click="submitForm('truckToCargoRule')" type="primary" style="margin-bottom: 10px;">校验</el-button>
</div>
</template>
<script>
import { isEmpty } from '../helper'
export default {
name: 'TruckLengthComp',
props: {
truckToCargoRule: {
type: Array,
}
},
data() {
return {
tempData: { truckToCargoRule: this.truckToCargoRule },
}
},
methods: {
validateMin(rule, value, callback) {
let index = rule.field?.split('.')?.[1];
let min = this.tempData.truckToCargoRule[index].to.min;
let max = this.tempData.truckToCargoRule[index].to.max;
if (isEmpty(min)) {
callback(new Error('必填'));
} else if (max < min) {
callback(new Error('必须小于等于结束车长'));
}
},
validateMax(rule, value, callback) {
let index = rule.field?.split('.')?.[1];
let min = this.tempData.truckToCargoRule[index].to.min;
let max = this.tempData.truckToCargoRule[index].to.max;
if (isEmpty(max)) {
callback(new Error('必填'));
} else if (max < min) {
callback(new Error('必须大于等于开始车长'));
}
},
submitForm() {
let isValidate = true;
for (let i = 0; i < this.$refs['truckToCargoRule'].length; i++) {
this.$refs['truckToCargoRule'][i].validate((valid) => {
if (!valid) {
isValidate = false;
}
});
}
if (isValidate) {
// 继续往下走
}
},
maxInput(index) {
let value = this.truckToCargoRule[index].to.max;
const regex = /^\d*\.?\d{0,1}$/;
if (value.length == 2 && value.startsWith('0') && value.charAt(1) != '.') {
this.truckToCargoRule[index].to.max = value[1];
} else if (regex.test(value)) {
// 使用正则表达式限制输入为数字且最多一位小数
this.truckToCargoRule[index].to.max = value;
} else {
// 如果不符合规则,则回退到上一次符合规则的值
this.truckToCargoRule[index].to.max = value.slice(0, -1);
}
},
minInput(index) {
let value = this.truckToCargoRule[index].to.min;
const regex = /^\d*\.?\d{0,1}$/;
if (value.length == 2 && value.startsWith('0') && value.charAt(1) != '.') {
this.truckToCargoRule[index].to.min = value[1];
} else if (regex.test(value)) {
// 使用正则表达式限制输入为数字且最多一位小数
this.truckToCargoRule[index].to.min = value;
} else {
// 如果不符合规则,则回退到上一次符合规则的值
this.truckToCargoRule[index].to.min = value.slice(0, -1);
}
}
},
}
</script>
引用如下:
<TruckLengthComp :truckToCargoRule="truckToCargoRule"></TruckLengthComp>
truckToCargoRule: [
{
"from": {
"min": 0,
"includeMin": true,
"max": 1.8,
"includeMax": true
},
"to": {
"min": 0,
"includeMin": true,
"max": 2.7,
"includeMax": true
}
},
{
"from": {
"min": 1.8,
"includeMin": true,
"max": 2.7,
"includeMax": true
},
"to": {
"min": 1.8,
"includeMin": true,
"max": 5.4,
"includeMax": true
}
},
{
"from": {
"min": 3,
"includeMin": true,
"max": 4,
"includeMax": true
},
"to": {
"min": 5,
"includeMin": true,
"max": 6,
"includeMax": true
}
}
]