输入时校验
<template><el-form :model="temp"><el-row :gutter="20"><el-col :span="12"><el-form-item label="服务台数" prop="equipmentNumber"><el-input v-model="temp.equipmentNumber" @input="checkEquipmentNumber" /></el-form-item></el-col><el-col :span="12"><el-form-item label="进口设备数量" prop="importNumber"><el-input v-model="temp.importNumber" @input="checkEquipmentNumber" /></el-form-item></el-col><el-col :span="12"><el-form-item label="国产设备数量" prop="domesticNumber"><el-input v-model="temp.domesticNumber" @input="checkEquipmentNumber" /></el-form-item></el-col><!-- 其他表单内容 --><el-form-item><el-button type="primary" :disabled="!isSubmitDisabled" @click="submitForm">提交</el-button></el-form-item></el-row></el-form>
</template><script>
export default {data() {return {temp: {equipmentNumber: '',importNumber: '',domesticNumber: ''},isSubmitDisabled: false // 是否禁用提交按钮};},methods: {checkEquipmentNumber() {this.temp.equipmentNumber = Number(this.temp.equipmentNumber);this.temp.importNumber = Number(this.temp.importNumber);this.temp.domesticNumber = Number(this.temp.domesticNumber);if (this.temp.equipmentNumber !== this.temp.importNumber + this.temp.domesticNumber) {this.$message.error('服务台数应等于国产设备数量与进口设备数量之和');this.isSubmitDisabled = true;} else {this.isSubmitDisabled = false;}},submitForm() {// 提交表单逻辑...}}
};
</script>
上述代码中,我们添加了@input="checkEquipmentNumber"事件监听器到每个输入框,每当输入值发生变化时会触发该方法进行校验。同时,我们通过isSubmitDisabled变量控制提交按钮是否禁用。如果设备数量不符合条件,则显示错误信息并禁用提交按钮。
离开时校验
当想需要的是当输入并且鼠标离开时
如果你想在用户输入后点击或鼠标离开输入框时再进行验证,可以使用blur事件代替input事件。以下是修改后的代码:
<template><!-- ...其他代码不变... --><el-form-item label="服务台数" prop="equipmentNumber"><el-input v-model="temp.equipmentNumber" @blur="checkEquipmentNumber" /></el-form-item><el-form-item label="进口设备数量" prop="importNumber"><el-input v-model="temp.importNumber" @blur="checkEquipmentNumber" /></el-form-item><el-form-item label="国产设备数量" prop="domesticNumber"><el-input v-model="temp.domesticNumber" @blur="checkEquipmentNumber" /></el-form-item><!-- ...其他代码不变... -->
</template><script>
// ...其他js部分(data和methods)不变...
</script>
这样,每次用户离开这三个输入框时,都会触发checkEquipmentNumber函数进行验证。注意,如果用户没有离开输入框直接提交表单,此时可能不会执行最新的验证,所以在提交表单前也可以再次进行一次验证以确保数据正确性。