vue.js 如何验证在FormKit中的文本输入中不能输入数字

vc9ivgsu  于 2023-06-24  发布在  Vue.js
关注(0)|答案(2)|浏览(108)

我在Nuxt 3 + Vue 3项目中使用FormKit。我想在输入文本框上添加一个验证检查,以确保如果用户只输入数字,则会通知用户输入无效,必须输入一些文本。
例如:
12345 -->无效输入
工程师1 -->这很好
formkit文档中有一个示例:参见https://formkit.com/essentials/validation#number

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

上面的代码确保用户只能输入数字。我如何扭转这种情况,确保用户不能只输入数字?我试过下面的方法,但似乎都没有效果:
选项1:!number不工作

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

选项1:not:number不起作用(我知道它不能这样使用。刚试过)

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

nxowjjhe1#

Fenilli是正确的,如果你需要在你的项目中使用它,你会想要为这种类型的事情注册一个自定义规则。
您还可以使用验证规则的数组语法和组件范围内的函数内联实现此功能,以防您只需要一次性使用它。

<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>

现场操场的例子可以在这里看到:https://formkit.link/b146d29c77521f621fe04e2f3e976957
有关全局添加验证规则的文档,请参见:https://formkit.com/essentials/validation#adding-a-rule-globally

zf9nrax1

zf9nrax12#

很高兴看到你在使用FormKit!
根据文档https://formkit.com/essentials/validation#rule-hints,!没有规则提示,并且not规则不接受其他规则作为输入,所以对于您的情况,最好是创建一个像alphanumeric_spaces这样的自定义规则:

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))
}

相关问题