Quasar q-input如何实现仅非空输入时才应用8位长度校验规则

• 校验逻辑完全反向：Quasar 表单规则的判定逻辑是「回调返回true = 校验通过，返回非空字符串 = 校验失败并展示对应提示」。原规则 val => val != '' && val.length >7 || 'Landline Required 8 digit' 的执行逻辑为：只有「值非空 + 长度大于7」两个条件同时满足时，才返回true通过校验；剩下所有场景——包括值为空、值非空但长度不足——都会触发后面的错误提示，空值自然也会弹错。
• 空值类型不匹配：设置type="number"后，输入框清空时绑定值为null而非空字符串''，原判断条件val != ''对null的判定结果为true，会错误进入后续分支。
• 属性兼容失效：原生type="number"的输入框本身不识别:maxlength配置，就算写了也无法从输入层限制最大长度。

<q-input
    filled
    name="landline"
    label="固定电话号码"
    v-model="user.landline"
    placeholder="请输入固定电话号码"
    ref="landlinePhoneNumber"
    type="text"
    inputmode="numeric"
    :maxlength="8"
    :rules="[
      (val) => {
        // 空值直接跳过校验，不触发报错
        if (val === null || val === undefined || val === '') return true
        const strVal = String(val).trim()
        // 非空时校验必须为纯数字
        if (!/^\d+$/.test(strVal)) return '请输入纯数字的固定电话'
        // 长度边界校验，和maxlength配置形成双保险
        if (strVal.length > 8) return '固定电话最多支持8位数字'
        return true
      }
    ]"
/>

• 把type="number"替换为type="text"搭配inputmode="numeric"：移动端会正常唤起数字键盘，同时能让:maxlength正常生效，还能避开number类型输入自带的e、小数点、正负号等非法字符输入问题。
• 空值判断覆盖null、undefined、空字符串三种常见场景，避免类型不匹配导致的误判。
• 规则逻辑完全匹配需求：只有当输入值非空时，才会触发数字格式、最大长度的校验；输入为空时直接返回true通过校验，不会弹出任何错误提示。

内容的提问来源于stack exchange，提问作者Shubham Sankpal