当表单填写时,实时监听输入的数据,当不相等时,提醒,且无法提交

输入时校验

<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函数进行验证。注意,如果用户没有离开输入框直接提交表单,此时可能不会执行最新的验证,所以在提交表单前也可以再次进行一次验证以确保数据正确性。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值