Quasar中无小数数量输入框的验证规则问题求助

你的问题出在验证规则里的取模逻辑错误，val % val 无论输入整数还是小数结果都是0，所以这个规则无法区分整数和小数。下面是修正后的实现方案：

修正后的代码 #

<q-input 
  outlined
  v-model.number="myproducts[index].qty"
  type="number"
  style="max-width: 100px"
  :max-decimals="0"
  :rules="[
    val => (val !== null && val !== '') || '请输入数量',
    val => val > 0 || '数量必须大于0',
    val => Number.isInteger(val) || '请输入整数'
  ]"
/>

关键修正点 #

• 替换无效的取模判断：用Number.isInteger(val)替代(val % val) === 0，这个方法可以准确判断值是否为整数
• 拆分验证规则：把多个判断拆分成独立规则，更清晰易维护，分别处理：
  • 必填验证：确保输入不为空或null
  • 最小值验证：确保数量大于0
  • 整数验证：确保输入是整数
• 保留max-decimals="0"：这个属性会限制输入框无法输入小数位，配合验证规则形成双重保障

额外优化建议 #

如果想彻底阻止用户输入小数点，可以添加@keydown事件拦截：

<q-input 
  outlined
  v-model.number="myproducts[index].qty"
  type="number"
  style="max-width: 100px"
  :max-decimals="0"
  :rules="[
    val => (val !== null && val !== '') || '请输入数量',
    val => val > 0 || '数量必须大于0',
    val => Number.isInteger(val) || '请输入整数'
  ]"
  @keydown="(e) => { if (e.key === '.') e.preventDefault() }"
/>

这样用户连小数点都无法输入，从源头避免小数输入。

内容的提问来源于stack exchange，提问作者Sona Rijesh