Reactjs Yup.number().integer() 不将 1.0 视为小数，如何解决这个问题

发布于08月04日

我有一个应该是only accept integers的字段，因为我的后端不能接受浮点类型.当使用Yup.number().integer()来实现这一点时，它适用于2、3、Yup.number().integer()等整数.然而，当我输入一个像1.0这样的值时，YUP会将其视为整数而不是小数，而将does not throw视为验证错误.

我们可以将Yup.number().integer()配置为将1.0视为小数吗？或者，我应该采取不同的方法来验证Yup中的整数值吗？如有任何见解或建议，我们将不胜感激.谢谢!

我try 对Number.isInteger使用test()，但不起作用

const integerValidation = (value) => {
  if (!Number.isInteger(value)) {
    return false;
  }
  return true;
};

const schema = Yup.object().shape({
  yourIntegerField: Yup.number().test('integer', 'Please enter an integer value', integerValidation),
});

推荐答案

Yup.teger(Message？:字符串|函数)只有一个参数，那就是测试失败时显示的错误消息，因此看起来不可能按您希望的那样进行配置.

在阅读this answer之后，看起来Number.isInteger(1.0)也将返回TRUE，因此您的整数验证将完全像Yup.Integer()那样工作.然而，正如答案所示，在Java脚本中，1和1.0是完全相同的，没有办法区分这两者.如果您确实需要区分这两者，您需要将它们视为字符串，并判断字符串includes('.').您必须像下面的示例那样更改验证函数，并且还需要将值从架构传递到验证函数才能运行.

const integerValidation = (value) => {
  if (!Number.isInteger(value) || String(value).includes('.')) {
    return false;
  }
  return true;

const schema = Yup.object().shape({
  yourIntegerField: Yup.number().test('integer', 'Please enter an integer value', (value) => integerValidation(value)),
});

Reactjs Yup.number().integer() 不将 1.0 视为小数，如何解决这个问题

推荐答案

Reactjs相关问答推荐

react 导致不必要的回归

如何使用React防止并发注册并处理Firestore数据库中的插槽可用性

React Router：在没有手动页面刷新的情况下，路由不会更新内容

我如何在不被 destruct 的情况下将导航栏固定在顶部？

React组件未出现

自定义变量默认、聚焦和填充时所需TextField中标签的星号 colored颜色

状态改变不会触发重新渲染

无法使用 Suspense 和 Await 获取数据

React router v5 仅在生产中不适用于嵌套路由

如何在 JS 中绘制具有不同笔画宽度的样条线

如何实现 redux 工具包来注册用户？

类型错误：类型typeof import(js-cookie)上不存在属性get

来自一个自定义 React Native 组件的样式从另一个自定义组件移除样式

更新 Next.js 路由查询更改的状态会导致无限循环

React CSSTransition 两次创建新页面并在这两个相同的页面上运行转换

ReactJs 行和列

具有自动完成功能的 Formik material ui 无法按预期工作

NextJs - 如何从站点 map 生成器中删除重复的 URL？

交换键仍然引入了 fresh 的 DOM 元素

调用函数以获取数据并在数据到达时导航到链接