如何使用yup验证firstName中的每个字符？
使用yup验证firstName中的每个字符可以通过自定义验证函数来实现。下面是一个示例代码：
import * as yup from 'yup';
const schema = yup.object().shape({
firstName: yup
.string()
.test('is-each-char-valid', 'Invalid characters in firstName', (value) => {
if (!value) return true; // Skip validation if value is empty
const regex = /^[A-Za-z]+$/; // Regular expression to match only alphabets
return regex.test(value);
}),
});
// 使用示例
const data = {
firstName: 'John',
};
schema.validate(data)
.then(() => {
console.log('Validation successful');
})
.catch((error) => {
console.log('Validation failed:', error.message);
});上述代码中，我们使用yup库创建了一个验证schema，其中firstName字段使用了自定义验证函数。该函数使用正则表达式来检查firstName中的每个字符是否为字母。如果验证失败，将返回一个错误消息。
这种验证方式可以确保firstName字段中只包含字母，并且可以根据需要进行自定义修改。请注意，这只是一个示例，实际使用时可以根据具体需求进行调整。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯区块链服务（TBaaS）：https://cloud.tencent.com/product/tbaas
- 腾讯云元宇宙：https://cloud.tencent.com/solution/metaverse
相关·内容
我正在学习如何使用Formik和Yup来验证输入(文本)表单字段。我遵循了贾里德·帕默的标准方法，它的效果非常好。
当涉及到做一些更多的组件驱动，我有一个困难的时间达到相同水平的价值，我只是不知道我是哪里错了？
Yup似乎无法识别我的表单模型，也不会根据需要验证输入字段.
我在想，我实际上搞砸了初始值，或者我没有给出Yup想要的正确形状，但是这里的任何帮助都会令人吃惊，这是疯狂的.
我有一个示例沙箱在这里运行>>
(components/CheckoutPage/FormModel/checkoutFormModel.js)：表单模型
export default {
for
浏览 1提问于2020-06-24得票数 2
回答已采纳
从字段中，如果您没有给出任何内容，那么您将得到验证错误，如果您单击submit按钮，您将得到验证错误--这是正确的，但是如何限制cancel按钮--如果您单击cancel按钮时没有在字段中提供任何数据，那么验证错误就不应该出现，如何仅对cancel按钮或任何类型的链接限制formik验证。我可以使用validateOnBlur，特别是cancel按钮，因为在初始阶段，如果我使用它禁用所有离焦类型的错误，但我只需要单击cancel，验证错误就不会出现。我应该遵循什么方法。
import React from "react";
import { Formik, Fo
浏览 8提问于2022-04-07得票数 1
回答已采纳
我使用Yup根据验证模式验证嵌套数据对象。我想检索第一个验证错误的路径。我用 of yup试了一下。它拥有默认为true的选项abortEarly。因此，在这种情况下，应该返回第一个错误。
然而，我总是得到最后一个错误。我不知道我错过了什么。
下面是我已经尝试过的代码。
const validationSchema = Yup.object().shape({
basicDetails: Yup.object().shape({
firstName: Yup.string().required("Required first name"),
浏览 5提问于2021-05-27得票数 6
回答已采纳
1回答
假设我们有一个有两个字段的表单，名字和姓氏。
我希望使用React来控制这个表单，并且我已经使用setTimeout模拟了API响应。
问题是，当API对某些属性返回null时，我会得到不受控制的反应警告。
我使用Formik的“name”支柱将我的JSON与我的表单输入相互绑定。
我该如何解决这个问题？
这是我的密码：
export default function Home() {
const [initialValues, setInitialValues] = useState({
firstName: '',
lastName: ''
浏览 5提问于2022-06-18得票数 0
1回答
是否有一种方法只从与所提供的模式相匹配的yup中获取值？
例如，我有这样的数据
const profileData = {
firstname: 'John',
lastname: 'Doe',
age: 53,
extra: 'An extra property'
}
这是我的模式
const profileValidationSchema = yup.object().shape({
firstname: yup.string().required(),
lastname: yup.string
浏览 29提问于2022-09-27得票数 3
1回答
我试图用Yup验证一个字符串：
const schema = object({
firstname: string().optional().nullable().notRequired().min(2),
});
规则应该是字符串，但可以为空或空，如果有值，则长度必须大于2。
但出于某种原因，这是行不通的：
const shouldWorks = [
{ firstname: 'bla' },
{ firstname: '' }, <--- its failed here.. empty is okay (.notRequired)
{
浏览 7提问于2022-11-06得票数 0
回答已采纳
1回答
是否有一种方法可以使formik字段是必需的，但是而不是没有显示错误消息？
即使从string.required()中移除任何字符串，Yup仍然会显示一个默认错误。
validationSchema={Yup.object().shape({
FirstName: Yup.string()
.required() // msg: FirstName is a required field
浏览 1提问于2020-08-20得票数 0
回答已采纳
我想要的要么是IT部门的所有联系人都被填满了，要么就是没有一个被填满。因此，例如，如果在IT head contact object name中，“姓氏”字段被填充，并且未填写电话号码，则会显示错误消息：“您应该填写IT头联系人中的所有字段，或者没有任何字段”。如果IT头联系人中的所有字段都已填写或未填写，则不会显示错误消息。可以用yup实现吗？我将提供下面的代码
下面是将发送到后端的对象的最终接口：
interface Contact{
firstName: string;
lastName: string;
email: string;
phone
浏览 3提问于2021-06-18得票数 0
回答已采纳
3回答
我和Yup有一个经典的Formik表单，就像这样：
// Schema for the form
const OrderFormSchema = Yup.object().shape({
lastname: Yup.string()
.required('Ce champs est obligatoire.'),
firstname: Yup.string()
.required("Ce champs est obligatoire"),
company: Yup.string()
.required('Ce cham
浏览 21提问于2022-07-15得票数 2
回答已采纳
2回答
因此，下面使用进行验证：
const myValidtion = yup
.string()
.trim()
.matches(/[abcdefghijklmnopqrstuvwxyz]+/ , 'Is not in correct format')
.required();
因此，这将通过：hello world如预期的那样。但让我困惑的是为什么这个也会通过：hello WORLD或者这个也会通过：hello ,&$#$ world
另一方面，如果我们只输入像*%$&#$($#这样的无效字符，这将不会传递并显示错误。因此，正如我所看到的，只有当ALL条目无效时
浏览 0提问于2019-01-28得票数 35
回答已采纳
下面是我使用React的formik表单验证代码。默认情况下，在加载表单时，我希望禁用submit按钮：
import { useFormik } from "formik";
import * as Yup from "yup";
const formik = useFormik({
initialValues: {
firstName: "",
lastName: "",
email: ""
},
validationSchema: Yup.obje
浏览 6提问于2019-12-22得票数 51
回答已采纳
我有一个表单，其中用户可以添加没有限制(添加股东)。 股东可以是两种不同的类型(自然/合法) 这是针对塔楼对象的接口： export interface shareholderNatural {
type: 'NATURAL';
firstName: string;
lastName: string;
personalCode: string;
sharePart: number;
politicallyExposed: boolean;
country: string;
position: string;
}
export interfac
浏览 13提问于2020-07-27得票数 1
回答已采纳
1回答
我有一个字段，它应该允许数组中具有特定组合的对象。例如： [
{firstName: 'A', lastName:'AAA'}, // valid
{firstName: 'A', lastName:'BBB'}, // valid
{firstName: 'A', lastName:'CCC'}, //not allowed
] 有没有可能用Yup呢？
浏览 14提问于2020-12-31得票数 1
1回答
我正在使用formik创建一个表单，并且已经完成了UI的创建，但是当我想使用yup验证表单时，我会得到一个错误，因为yup.string().firstname不是一个函数。(在'yup.string().firstname("firstname必须是20个字符或以下的字符“)中，'yup.string().firstname还没有定义。‘yup.string().firstname是未定义的。为什么? yup只用于验证电子邮件和密码?如果是这样的话，我们如何才能为名字和类似的东西设置必需的？
我的Contactus.js代码如下所示。
import React fro
浏览 4提问于2022-07-13得票数 0
回答已采纳
3回答
如何进行密码验证，但同时将错误传递给不同的变量？
i.e
password: Yup.string().required("Please provide a valid password"),
passwordMin: Yup.string().oneOf([Yup.ref('password'), null]).min(8, 'Error'),
passwordLC: Yup.string().oneOf([Yup.ref('password'), null]).matches(/[a-z]/, "Error"
浏览 0提问于2018-03-27得票数 26
回答已采纳
1回答
我有formik form和下面的initialValues
const initialValues1 = {
people: [
{
id: Math.random(),
email: "",
isNewUser: true,
profile: {
firstName: "",
lastName: "",
}
}
]
};
我只想验证firstName和lastName时，只有当isNewUser is true是由Yup，我正在尝试，但
浏览 1提问于2020-04-25得票数 0
我们有一个第三方组件，我们希望使用SecondaryInputWant来使用Yup验证(不知道如何与规则道具一起使用yup，在Controller component)Controlled组件中，子组件中，所以我使用的是useFormContextSchema代码不工作的)
我的代码是这样的
注意:我不能在自定义组件中使用ref，因为它不使用像ref这样的道具。
父组件
const schema = yup.object().shape({
patientIdentity: yup.object().shape({
firstName: yup.string().req
浏览 5提问于2020-11-05得票数 2
回答已采纳
3回答
在我的例子中，我有一个yup模式表单验证。例如：
const form = yup.object().shape({
firstName: yup.string().nullable().required(),
lastName: yup.string().nullable().required(),
country: yup.string().nullable().required()
.test('validator', 'country is incorrect', value => {
return new Promise(
浏览 5提问于2019-10-31得票数 2
我是一个初学者，试图用Yup验证在reactjs中创建一个表单。我正在尝试一个非常简单的表单，它有firstName，lastName。在验证lastName字段时，我尝试只显示firstName字段。
使用useFormik钩子
const formik = useFormik({
initialValues: {
firstName: "",
lastName: "",
// email: ""
},
validatio
浏览 9提问于2022-04-13得票数 1
如何在yup.validationSchema中添加和删除验证字段 const validationSchema = yup.object().shape({
password: yup
.string()
.label('Password')
.required()
.min(2, 'Seems a bit short...')
.max(10, 'We prefer insecure system, try a shorter password.'),
浏览 67提问于2019-04-24得票数 4
1回答
我正在尝试使用yup和useForm在React上验证我的表单，我已经遵循了教程的每一步，但我仍然收到错误。我收到'TypeError: Cannot read property 'firstName‘of undefined’。这很奇怪，因为我已经在输入值中给它命名了。我该如何解决这个问题呢？
附言:我尝试过使用{...register}和ref={register}，但这似乎无关紧要。
import React from 'react'
import { useForm } from "react-hook-form";
import { y
浏览 26提问于2021-06-05得票数 0
1回答
我想设置一个用户输入的最小验证。首先，我要验证它不是空字符串，所以类似
yup.string().min(10);
我还想验证它是否有日期格式，所以
yup.string().min(10).date();
我也想把它与另一个日期进行比较，以确保范围是有意义的。
我看过yup文档，无法理解如何完成这三项任务。所以我想出的“解决方案”是
const hasMaxDateTime =
value &&
isDefined(value.maxCreatedAt) &&
isNaN(Date.parse(val
浏览 3提问于2022-01-01得票数 3
我使用formik作为表单实现。当您在上面的行中添加数据时，我们需要追加一个新的字段行。在提交表单时，我们将得到yup验证错误，因为新添加的行不符合条件。请建议跳过新添加的行(最后一行)的验证的解决方案。
This is the validation schema
Yup.object().shape({
key1: Yup.object({
key2: Yup.object({
key3: Yup
.array()
.of(Yup.object().shape
浏览 1提问于2019-09-10得票数 3
回答已采纳
1回答
如何创建一个验证器，该验证器满足以下所有非排他性要求，并为每个需求显示不同的错误消息？我有一个Formik表单字段来查询电话号码。验证要求是
无字母字符(ASCII字母表: and )无周期符号无符号(非句号-例如±、$、%、^等)仅为数字、空格和
使用以下命令轻松地使用catch：/^[\s\d\)\(\-]+$/处理该需求：
phoneNo: yup
.string()
.min(6, 'Phone must be at least 6 characters')
.max(35, 'Phone number must be at most 35 characters
浏览 33提问于2022-09-14得票数 1
回答已采纳
5回答
下面是我的验证模式：
const validationSchema = Yup.object().shape({
person: Yup.object().shape({
name: Yup.string().required('Field is required'),
surname: Yup.string().required('Field is required'),
middleName: Yup.string().required('Field is required'),
浏览 7提问于2019-02-28得票数 26
回答已采纳
我有通用的框架代码，它使用Yup和stripUnknown: true来验证传入的请求，这样多余的字段就会被删除。但是，我有一个地方明确地希望允许任何JSON对象作为输入。
在使用stripUnknown: true时，如何显式地允许架构中的一个对象具有任何字段
我已经考虑过但还没有想出如何实现的事情：
使用yup.object().test(...)或类似的方法显式地允许对象
利用yup.addMethod向yup.object()中添加一种短路剥离的方法。
使用yup.lazy生成允许任何东西的模式(但是类型应该允许嵌套JSON，而不仅仅是顶级字段)。
添加一个新的顶级类型
浏览 5提问于2021-05-28得票数 0
回答已采纳
我很难验证输入中的每一个字符。我想返回无效输入的firstName，如果有一些除了简单的字母字符，即。如果有数字或特殊字符。 这是我的代码，我正在寻找能够提供我想要的行为的东西： const FormSchema = yup.object().shape({
firstName: yup
.string()
.max(40).
.required(), ..。 <Formik initialValues={initialValues} validationSchema={FormSchema} validateOnMount onSubmit
浏览 33提问于2020-04-09得票数 1
回答已采纳
我试图使用React Hook- form和React Query创建一个表单，每当用户更改任何字段(取消)时，都会自动生成该表单。我正在接近，但当我变异时，它会产生一个无限的循环。以下是我所拥有的：
"@tanstack/react-query": "^4.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.34.2",
import React from 'rea
浏览 6提问于2022-09-05得票数 1
回答已采纳
1回答
我正在做一个用MUI，react表单和yup制作的长登记表的项目。一次只呈现一个字段，使用" next“按钮将显示的输入字段更改为下一个字段(即从email字段转到name字段)。现在，它不允许我提交电子邮件字段并显示name字段，因为它想验证这两个字段，因为没有条件验证。我有以下模式：
const schema = yup.object().shape({
email: yup.string().email().required(),
firstName: yup.string().required("Please enter your first name"
浏览 1提问于2022-01-07得票数 0
回答已采纳
1回答
我有下一个情况：
interface FORM<P> {
onSubmit: (d: P) => void;
schema?: yup.SchemaOf<P>;
}
这就是我的onSubmit的样子：
const onSubmit = (d: { firstName: string; lastName: string }) => {
console.log(d);
};
这就是我的schema的样子：
const schema = yup.object({
firstName: yup.string().required('
浏览 6提问于2022-11-11得票数 -1
1回答
我正在使用react，类型记录和电子邮件JS库。我正在使用react钩子表单库和yup来验证表单。
我需要捕获的表单验证错误，是抛出的反应钩子库，只有当没有错误，一封电子邮件应该发送与电子邮件JS。
代码的相关部分是sendEmail函数。
位于handleSubmit(onSubmit)();函数中的sendEmail验证表单。
我把handleSubmit(onSubmit)()放在了一个try catch块中，但是它没有捕获错误。代码继续并发送电子邮件。如果存在表单验证错误，如何阻止电子邮件被发送。
import React, { useRef, useState } from "
浏览 10提问于2022-08-15得票数 0
我有以下组件，我在其中调用我的窗体：
import { useState } from "react";
import GuestsList from "./GuestsList";
import GuestsForm from "./GuestsForm";
const initialValues = [
{ id: 1, firstName: "John", lastName: "Snow", email: "john@snow.com" },
{ id: 2, firstName:
浏览 0提问于2020-12-27得票数 0
1回答
我是新的反应和正确的验证。这就是那个实体
export interface ClientContact {
names?: {
firstName?: string;
middleName?: string;
lastName?: string;
}[];
}
我不希望名字超过75个字符，即名字、中名和姓的长度之和不能超过75个。
const schema = Yup.object().shape({
contacts: Yup.array().of(
Yup.object().shape({
names: Yup.array
浏览 2提问于2022-10-17得票数 2
回答已采纳
1回答
密码:Yup.string().required(‘请输入您的Yup.string }$/，’test‘).required(“需要密码”)，
这里的任何人都知道为什么.matches不会带回错误消息吗？我真的不想为我们想要满足的每个条件运行一堆.test()。
这似乎是Yup的一个持续问题，我们如何在代码中设置它是没有意义的。
我很好地获得了所需的消息，但是我希望.match()中的消息显示它是否满足
const formik = useFormik({
initialValues: { username: '', password: '', firs
浏览 4提问于2022-04-26得票数 1
回答已采纳
1回答
我在react中使用formik进行验证，但现在我需要在yup.object({})中使用firstName的值。我怎样才能访问它？
const validationSchema = yup.object({
firstName: yup
.string("Enter your First Name")
.required("First Name is required"),
})
const formik = useFormik({
initialValues: {
firs
浏览 10提问于2021-06-01得票数 0
回答已采纳
1回答
有人能帮帮我吗?我正在看React-Bootstrap验证示例，它以以下方式使用Yup (它是this page if you scroll down to Validation)： const schema = yup.object().shape({
firstName: yup.string().required(),
lastName: yup.string().required(),
username: yup.string().required(),
city: yup.string().required(),
state: yup.string().requ
浏览 14提问于2021-03-18得票数 0
回答已采纳
我正在尝试在我的注册表格中添加惰性电子邮件唯一的验证器。它可以工作，但是当我在其他字段(也包括电子邮件字段)中键入某些内容时，唯一的验证器会不断地运行，并不断地向服务器发送请求。我认为表单级别验证会导致这种情况，但我无法找到关闭它的方法。如何防止在表单级别验证email字段以处理烦人的验证请求？
下面是脚本设置：
<script setup lang='ts'>
// E-mail unique validator (adding method to YUP's string)
addMethod(string, 'unique', func
浏览 24提问于2022-05-03得票数 1
当我console.log "formik.errors“时我有：
Array [ {…} ]
0: Object { firstName: "First name is required", lastName: "Last name is required", email: "Invalid email", … }
email: "Invalid email"
firstName: "First name is required"
lastName: "Last name is required&
浏览 5提问于2022-04-23得票数 2
1回答
我正在使用Formik与Yup在一个项目，我正在工作。
我正在创建一个多步表单。当用户单击next按钮时，如果步骤1的输入是有效的，我想显示第二步的输入。否则，他应该留在第一步。
是否有一个函数来检查输入是否有效？
<Formik
initialValues={{
name: '',
kitchenName: '',
phone: '',
email: '',
address: {
street: '',
city: '',
postalCode:
浏览 3提问于2021-03-18得票数 0
回答已采纳
我发现当有一个min/max值时，yup会忽略nullable字段。
myValue: string().nullable().min(10, "This value must be minimum of 10 characters.")`.
有一个是关闭回购没有任何解决方案。
这是预期的行为吗?如果是的话，有什么解决办法吗？我可以在不使用yup的情况下检查值的长度并引发错误，但是，我希望将其全部保存在yup模式验证中。
浏览 3提问于2021-07-21得票数 0
我想知道是否有人可以建议我如何让yup验证任何长度的字符串(包括长度0)。 只是在使用 yup.string().required().validateSync("") 将在空字符串上抛出错误... 在过去，这是推荐的方式： string().required().min(0) 但这种方式已经行不通了。(https://github.com/jquense/yup/issues/136#issuecomment-339235070) 有人可以建议我如何让yup要求发送一个字符串，而不是在长度为0的字符串上出错？ 谢谢!
浏览 69提问于2020-09-18得票数 3
回答已采纳
我正在开发一个Ionic React应用程序，我想使用React Hook表单和Yup解析器来提交表单。我的表单包含一个单选按钮和另外两个输入。 我在使用单选按钮时遇到了困难。我应该如何编写它才能存储它的值并提交？下面是我的组件。即使我选择了其中一个单选按钮，也没有存储任何值。 import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
const validationSchema = yup.object().shape({
firstName:
浏览 24提问于2021-05-07得票数 4
回答已采纳
1回答
我的问题是，如果其中一个字段存在，我如何使用Yup进行验证？ const Schema = yup.object({
firstname: yup.string().ensure().trim().required("There must be a name"),
lastname: yup.string().ensure().trim().required("There must be a
lastname")
}
);
浏览 8提问于2019-02-12得票数 2
1回答
我有一个使用Formik的<Form />和<FieldArray />组件的动态表单。我的验证模式如下：
const countPerKgSchema = total => {
return Yup.object().shape({
rows: Yup.array()
.of(
Yup.object().shape({
count: Yup.string().required('Count is required'),
kg: Yup.string().require
浏览 14提问于2020-03-06得票数 2
2回答
我正在使用formik和yup来验证React Native中表单的输入。我验证了所有的数据，除了使用useRef的出生日期 const dob = useRef("Birth Date");
{/* Date Of Birth */}
<View>
<TouchableOpacity onPress={showDatepicker}>
<View>
<Text>{dob.current}</Text>
</View>
</TouchableOpacity&g
浏览 24提问于2021-08-31得票数 0
我正在使用Formik和来构建一个用户注册表单。现在，我只是console.logging从表单中捕获的值，但出于某种原因，我的表单没有捕获来自<Form.Check>元素的值。
我真的很感激任何帮助，因为我已经挣扎了几个小时！
const Register = () => {
const formik = useFormik({
initialValues: {
firstname: '',
surname: '',
email: '',
password
浏览 1提问于2022-05-01得票数 0
回答已采纳
我有一个表单与Formik，我将减少重新呈现，所以我使用了FastField。我得到了错误Cannot read properties of undefined (reading 'getFieldProps')，我不知道如何解决它。
有完整的代码
我发现了和
import React from "react";
import ReactDOM from "react-dom";
import { useFormik, FastField } from "formik";
import * as yup from "yup
浏览 21提问于2022-03-09得票数 0
我有一个电子邮件字段的问题，我想阻止用户，如果他的输入包括感叹号在电子邮件字段。例如，如果用户输入由感叹号组成，则电子邮件字段将显示Email address cannot use exclamation mark
下面是我当前的email yup验证代码，目前只能正常验证电子邮件格式，但我不知道如何在下面的代码中阻止感叹号：
const validationSchema = Yup.object().shape({
email: Yup.string()
.email(
intl.formatMessage({
id: "10003&#
浏览 8提问于2022-11-16得票数 2
我有一个更新的ProfilePage组件，我想使用useQuery预加载从Axios请求收到的数据的表单值，但是似乎在请求完成之前useFormik initialValues呈现，因此初始值未定义，有人能帮我吗？
const { isSuccess, data } = useQuery("author", async () => {
const endPoint = `${baseURL}/auth/author`;
return Axios.get(endPoint, {
headers: {
"x-auth-t
浏览 11提问于2022-02-11得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
