为什么数字验证规则在 antd 中不起作用

IT技术 javascript reactjs antd
2021-04-27 23:21:32

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

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

我尝试了其他规则，它们工作正常。数字有什么问题？

2个回答

内置方法不起作用，因为 Ant Design v4 将输入识别为字符串。解决方案是使用正则表达式。

<Form.Item
    name="myNumber"
    rules={[{ 
        required: true, 
        message: "A value must be entered",
        pattern: new RegExp(/^[0-9]+$/)
    }]}
>
    <Input
        placeholder="x"
        maxLength={5}
    />
</Form.Item>

还值得注意的是，该getFieldDecorator()方法从 Ant Design 的 v4 开始基本上是多余的。他们也应该更好地宣传这一点。

上面的 Regex 模式强制使用整数而不允许使用小数。

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

第一个解决方法是只使用 Ant Design 的<Input Number/>组件，它不会将数字存储为字符串（AFAIK 不查看源代码）。尽管该组件非常好，但它确实带有用于调整数字的箭头，如果提示诸如邮政编码之类的内容，则这不是最佳选择。

经过进一步挖掘，无论是真正的错误还是疏忽，{type:number}在使用 Ant Design 的<Input/>组件时都无济于事。

我建议您查看Issue #731，然后查看Issue #10003以获取更多详细信息。（有在这两个像一些漂亮整洁的验证代码，这...只是四处浏览和探索）。

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

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

<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会解决你的问题。

其它你可能感兴趣的问题
上一篇fetch 给出响应 Unexpected token < in JSON 下一篇react-dom/server 在客户端工作吗？