How to validate that a number cannot be entered in a text input in FormKit

I am using FormKit in a Nuxt 3 + Vue 3 project. I wanted to add a validation check on an input textbox to ensure that if a user enters only numbers, then the user is informed that the input is invalid and must enter some text.

For example:

12345 --> INVALID input

Engineer 1 --> This is fine

The formkit documentation has this as an example: See, https://formkit.com/essentials/validation#number

<FormKit
  type="text"
  label="Age"
  validation="number"
  value="27365 days old"
  validation-visibility="live"
/>

The above code ensures that a user must enter only numbers. How do I reverse this ensuring that the user cannot enter only numbers? I have tried the below but none seem to be working:

Option 1: !number does not work

<FormKit
  type="text"
  label="Position"
  validation="!number"
/>

Option 1: not:number does not work (I know it cannot be used this way. Just tried it out)

<FormKit
  type="text"
  label="Position"
  validation="not:number"
/>

</details>


# 答案1
**得分**: 4

Fenilli正确，如果您需要在整个项目中使用它，您将需要注册一个自定义规则来处理这种情况。

您还可以内联实现此操作，使用验证规则的数组语法以及组件范围内的函数，如果您只需要一次性使用它。

```vue
&lt;script setup&gt;
const cannotBeOnlyNumbers = ({ value }) =&gt; {
  const regex = /^(?![0-9]+$)[a-zA-Z0-9 ]{2,}$/
  return regex.test(String(value))
}
&lt;/script&gt;

&lt;template&gt;
  &lt;FormKit
    type=&quot;text&quot;
    :validation=&quot;[[&#39;required&#39;],[cannotBeOnlyNumbers]]&quot;
    :validation-messages=&quot;{
      cannotBeOnlyNumbers: &#39;Value cannot be only numbers.&#39;,
    }&quot;
    validation-visibility=&quot;live&quot;
    label=&quot;FormKit Input&quot;
    help=&quot;edit me to get started&quot;
  /&gt;
&lt;/template&gt;

您可以在此处查看实时播放示例：https://formkit.link/b146d29c77521f621fe04e2f3e976957

有关全局添加验证规则的文档，请参阅：https://formkit.com/essentials/validation#adding-a-rule-globally

<script setup>
const cannotBeOnlyNumbers = ({ value }) => {
  const regex = /^(?![0-9]+$)[a-zA-Z0-9 ]{2,}$/
  return regex.test(String(value))
}
</script>

<template>
  <FormKit
    type="text"
    :validation="[['required'],[cannotBeOnlyNumbers]]"
    :validation-messages="{
      cannotBeOnlyNumbers: 'Value cannot be only numbers.',
    }"
    validation-visibility="live"
    label="FormKit Input"
    help="edit me to get started"
  />
</template>

答案2

得分: 1

"Happy to see you're using FormKit!

As per documentation https://formkit.com/essentials/validation#rule-hints there isn't a rule-hint for ! and the rule not doesn't accept other rules as its input, so for your case the best would be to create a custom rule like alphanumeric_spaces like so:

const alphanumeric_spaces: FormKitValidationRule = function (
  { value },
  set = 'default'
) {
  const sets = {
    default: /^[\p{Lu}\p{L} ]+$/u,
    latin: /^[a-zA-Z0-9 ]+$/,
  }
  const selectedSet: 'default' | 'latin' = has(sets, set) ? set : 'default'
  return sets[selectedSet].test(String(value))
}
```"

<details>
<summary>英文:</summary>

Happy to see you&#39;re using FormKit!

As per documentation https://formkit.com/essentials/validation#rule-hints there isn&#39;t a rule-hint for `!` and the rule `not` doesn&#39;t accept other rules as its input, so for your case the best would be to create a custom rule like `alphanumeric_spaces` like so:

```js
const alphanumeric_spaces: FormKitValidationRule = function (
  { value },
  set = &#39;default&#39;
) {
  const sets = {
    default: /^[\p{Lu}\p{L} ]+$/u,
    latin: /^[a-zA-Z0-9 ]+$/,
  }
  const selectedSet: &#39;default&#39; | &#39;latin&#39; = has(sets, set) ? set : &#39;default&#39;
  return sets[selectedSet].test(String(value))
}