为什么数字验证规则在 antd 中不起作用 [英] Why number validate rule doesnt work in antd

问题描述

我有一个简单的登录表单，但是输入项 tn 的 type: 'number' 验证规则不起作用.即使我输入一个数字，我也会在控制台中得到 'tn' is not a valid number' .

I have a simple login form, but validation rule with type: 'number' for input item tn doesn't work. Even if I enter a number, I get 'tn' is not a valid number' in console.

    import React from 'react';
    import { Form, Input, Button, Checkbox } from 'antd';
    import { UserOutlined, LockOutlined } from '@ant-design/icons';
    import './style.css';
    
    export const LoginForm = () => {
      const onFinish = (values) => {
        console.log('Received values of form: ', values);
      };
    
      return (
        <Form
          name="login_form"
          className="login-form"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
        >
          <h3 className="main-label">LOG IN</h3>
          <Form.Item
            name="tn"
            rules={[
              {
                type: 'number',
                required: true,
                message: 'Wrong number',
              },
            ]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="Enter your tn"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: 'Please input your password',
              },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>Remember me</Checkbox>
            </Form.Item>
          </Form.Item>
    
         ...
      );
    };

我尝试了其他规则，它们运行良好.数字有什么问题?

I tried other rules and they works fine. What's the problem with numbers?

推荐答案

由于 Ant Design 的 <Input/> 组件，即使设置了类型属性，它也会将数字存储为字符串.

Due to Ant Design's <Input/> component, it will store the number as a string even if the type props have been set.

第一个解决方法是使用 Ant Design 的 组件，它不将数字存储为字符串(AFAIK 不查看源).尽管该组件相当不错，但它确实带有用于调整数字的箭头，如果提示诸如邮政编码之类的内容，这不是最佳选择.

The first workaround is to just use Ant Design's <Input Number/> component, which doesn't store the number as a string (AFAIK without looking at the source). Although that component is quite nice, it does come with the arrows for adjusting the number, which isn't optimal if prompting for something like a zip code.

经过进一步挖掘，无论是真正的错误还是疏忽，{type:number} 在使用 Ant Design 的 组件.

After further digging, whether it is a real bug or an overlook, {type:number} won't get you anywhere when using Ant Design's <Input/> component.

我建议您查看问题#731，然后查看问题#10003了解更多详情.(有一些非常简洁的验证代码，例如 this ...但只需浏览一下探索).

I would suggest you check out Issue #731, then check out Issue #10003 for more details. (there is some pretty neat validation code in both of those like this ... but just browse around and explore).

我喜欢只列出规则集而不实现自定义验证器的简单性(特别是对于像仅数字这样的问题)；然而，这并不总是可能的.

I like the simplicity of just listing the rule sets without implementing a custom validator (especially for problems like number-only); however, it's not always possible.

这是我用于邮政编码验证的一些示例代码.请注意，您始终可以在验证器的末尾将消息字符串组合成一个 Promise.Reject()，但我发现它会使用户的屏幕变得混乱(尤其是有两个以上的验证错误消息).

Here is some sample code that I use for my Zip Code validation. Note that you could always combine the message strings into one Promise.Reject() at the end of the validator, but I find it clutters up the screen for the user (especially with more than two validation error messages).

<Form.Item
  validateTrigger="onBlur"
  name="ZipCode"
  label="Zip Code"
  hasFeedback
  rules={[
    {
      required: true,
      message: "Please enter zip code",
    },
    () => ({
      validator(_, value) {
        if (!value) {
          return Promise.reject();
        }
        if (isNaN(value)) {
          return Promise.reject("Zip code has to be a number.");
        }
        if (value.length < 5) {
          return Promise.reject("Zip code can't be less than 5 digits");
        }
        if (value.length > 5) {
          return Promise.reject("Zip code can't be more than 5 digits");
        }
        return Promise.resolve();
      },
    }),
  ]}
>
  <Input />
</Form.Item>;

不确定我是否只是忽略了这一点，或者他们是否最近提出了这一点，但是有一个使用自定义验证的有效输入(如您所愿).我相信这个 CodePen解决您的问题.

Not exactly sure if I just overlooked this or if they recently put it up, but there is a working input (like you want) using custom validation. I believe this CodePen will solve your problem.

这篇关于为什么数字验证规则在 antd 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！