当前位置：首页 > 软件库 > Web应用开发 > 常用JavaScript包 >

Yup

无效的简单对象架构验证

授权协议 MIT

开发语言 JavaScript TypeScript

所属分类 Web应用开发、常用JavaScript包

软件类型开源软件

地区不详

投递者戚飞雨

操作系统跨平台

开源组织无

适用人群未知

软件概览

Yup 是一个用于数值解析和验证的 JavaScript 模式构建器。定义一个模式，转换一个值来匹配；验证一个现有值的形状，或者两者都是。Yup 模式具有极强的表现力，允许对复杂的、相互依赖的验证或价值转换进行建模。

Yup 的 API 在很大程度上受到 Joi 的启发，但更精简，并以客户端验证作为其主要用例。Yup 将解析和验证功能分为不同的步骤。 cast() 对数据进行转换，而 validate 则检查输入的形状是否正确。每个步骤都可以一起执行（比如 HTML 表单验证）或单独执行（比如从 API 反序列化可信数据）。

import * as yup from 'yup';

let schema = yup.object().shape({
  name: yup.string().required(),
  age: yup.number().required().positive().integer(),
  email: yup.string().email(),
  website: yup.string().url(),
  createdOn: yup.date().default(function () {
    return new Date();
  }),
});

// check validity
schema
  .isValid({
    name: 'jimmy',
    age: 24,
  })
  .then(function (valid) {
    valid; // => true
  });

// you can try and type cast objects to the defined schema
schema.cast({
  name: 'jimmy',
  age: '24',
  createdOn: '2014-09-23T19:25:25Z',
});
// => { name: 'jimmy', age: 24, createdOn: Date }

使用案例

正则,Yup 匹配数量，金额，name..

产品数量： ^[1-9]*[1-9][0-9]*$ 产品价格： (^[1-9][0-9]*$)|(^0.[0-9]+$)|(^[1-9][0-9]*.[0-9]+$) 小数点后最多两位 /^\d+(\.(\d){1,2})?$/ \d+ 表示以一个或多个数字开头确保不出现 .1 (\.(\d){1,2})? 表示有0个或者1个 \.(\d){1,2}部分出现这部分作用是一个小数点在前面
React使用formik+yup创建表单

React使用formik+yup创建表单简述在React中，react提供了ref来让我们获取react元素对应的真实的dom元素，利用这个特性我们确实可以获取表单域所对应的值 import React, { Fragment, useRef, useState } from "react"; export default function A() { const inputRef =
React SolidJS Svelte 使用 Yup 进行表单验证的最佳实践

相关网址 Yup官网 (一个通用的验证框架, 可以接入很多的表单验证库) Felte官网 (同时支持 React Solid Svelte ,以后应该会支持更多的库) react-hook-form 官网定义验证规则与生成普通的ts类型更多规则看官方文档，最大值、最小值、大小写、枚举、默认值、等等 js 中 “undefined === null” 返回结果是 false . 所以是两
登录（三）02-登录表单验证——实例-yup方式 & 表单验证流程

登录表单验证——实例-yup方式 & 表单验证流程安装：yarn add yup ，导入 Yup。在 withFormik 中添加配置项 validationSchema，使用 Yup 添加表单校验规则。在 Login 组件中，通过 props 获取到 errors（错误信息）和 touched（是否访问过，注意：需要给表单元素添加 handleBlur 处理失焦点事件才生效！）。在表单
yup schema 书写

yup schema 是一种用于描述 JSON 数据的语法。它可以用于验证 JSON 数据的有效性，并可以帮助开发人员在设计 API 时统一数据格式。 yup schema 由一系列的规则组成，每个规则描述了一个 JSON 字段的类型、是否必须、是否可空等信息。例如，下面是一个简单的 yup schema 示例： const schema = yup.object().shape({name: y
formik-yup书写React表单验证

使用formik和yup是为了解决react-form表单验证的繁琐不使用插件，form表单验证利用onChange事件触发写的表单规则再分别对不同type书写规则验证逻辑为表单定义state // 关键代码逻辑 //组件触发区 <TextField id="ResetEmail" type="email" label="E-mail" onChange=

Yup

同类工具

相关阅读

相关文章

相关问答

相关文档