当表单填写时,实时监听输入的数据,当不相等时,提醒,且无法提交
输入时校验
<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函数进行验证。注意,如果用户没有离开输入框直接提交表单,此时可能不会执行最新的验证,所以在提交表单前也可以再次进行一次验证以确保数据正确性。
原文地址:https://blog.csdn.net/weixin_45816407/article/details/137146490
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!