如何在FormKit文本输入框中禁止仅输入纯数字？

要实现「禁止仅输入纯数字，必须包含文本内容」的验证需求，直接使用!number或not:number无法精准满足——因为FormKit内置的number规则是判断输入是否能被解析为有效数字，而非是否仅由数字组成。以下是两种可行的实现方案：

方式一：局部自定义验证规则 #

适合单个组件使用，直接在组件内编写验证逻辑：

<FormKit
  type="text"
  label="Position"
  :validation="[
    (value) => {
      // 可选：若需要必填校验，可添加空值判断
      // if (!value?.trim()) return '请输入职位信息';
      
      // 正则匹配「纯数字」（仅整数），若要禁止纯小数可改用 /^[\d.]+$/
      const isOnlyDigits = /^\d+$/.test(value?.trim() || '');
      return isOnlyDigits ? '输入不能仅包含数字，请包含文本内容' : true;
    }
  ]"
  validation-visibility="live"
/>

• 正则说明：^\d+$表示输入内容从开头到结尾全是数字（不含小数点、空格等非数字字符）；如果需要禁止纯小数（如123.45），可替换为^[\d.]+$。
• 若需同时开启必填验证，可在validation数组中追加'required'。

方式二：注册全局验证规则 #

如果多个组件需要复用该验证规则，可全局注册自定义规则：

1. 在Nuxt项目的plugins/formkit.ts中添加规则：

import { defaultConfig, plugin } from '@formkit/vue';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(plugin, defaultConfig({
    config: {
      rules: {
        notOnlyDigits: ({ value }) => {
          if (!value?.trim()) return true; // 空值逻辑可根据需求调整，必填则返回错误提示
          const isOnlyDigits = /^\d+$/.test(value.trim());
          return isOnlyDigits ? '输入不能仅包含数字，请包含文本内容' : true;
        }
      }
    }
  }));
});

2. 在组件中直接调用：

<FormKit
  type="text"
  label="Position"
  validation="notOnlyDigits"
  validation-visibility="live"
/>

为什么!number无效？ #

FormKit的number规则是验证输入是否为可解析的有效数字（比如123、123.45会通过验证），!number则是禁止所有可解析为数字的输入——这和需求逻辑存在偏差：

• 当输入Engineer 1时，number验证失败，!number会通过（符合需求）；
• 但如果输入123a（含数字和文本），number验证失败，!number也会通过（符合需求）；
• 问题在于，!number无法精准区分「纯数字」和「可解析为数字的内容」，比如输入123（带空格的纯数字），number会忽略空格判定为有效数字，!number会报错（这其实符合需求），但如果需要更精准地判断是否仅由数字组成，自定义正则的方式更可靠。

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