如何在表单中使用Ant制定规则？

问题描述

我对表格中的规则有疑问。现在，它显示消息Please input your Username!和Username must be 26 letters of the alphabet(upper and lowercase) or arabic number(0-9) or underscore(_) as a character。当我在用户名中输入空格时，我已经在规则中添加了空白：true，但是它仍将显示两条消息，所以当我在用户名中以空格开头时，怎么只显示Please input your Username!？ >

import React from 'react';
import { Form,Input,Button } from 'antd';
import { UserOutlined,LockOutlined } from '@ant-design/icons';

import './login.less';
import logo from './images/logo.png';

const Item = Form.Item; //it must write after Import
const Login = () => {
  const onFinish = values => {
    console.log(values);
  };

  return (
    <div className="login">
      <header className="login-header">
        <img src={logo} alt="logo" />
        <h1>React Project: Backend Admin System</h1>
      </header>
      <section className="login-content">
        <h3>User Login</h3>
        <Form onFinish={onFinish} name="normal_login" className="login-form">
          <Item
            name="username"
            rules={[
              { required: true,whitespace:true,message: 'Please input your Username!' },{
                min: 4,message: 'username must be at least 4 characters',},{
                max: 12,message: 'username cannot be longer than 12 characters',{
                pattern: /^[a-zA-Z0-9_]+$/,message:
                  'Username must be 26 letters of the alphabet(upper and lowercase) or arabic number(0-9) or underscore(_) as a character',]}
          >
            <Input
              prefix={
                <UserOutlined
                  className="site-form-item-icon"
                  style={{ color: 'rgba(0,.25) ' }}
                />
              }
              placeholder="Username"
            />
          </Item>
          <Item name="password">
            <Input
              prefix={
                <LockOutlined
                  className="site-form-item-icon"
                  style={{ color: 'rgba(0,.25) ' }}
                />
              }
              type="password"
              placeholder="Password"
            />
          </Item>
          <Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              Log in
            </Button>
          </Item>
        </Form>
      </section>
    </div>
  );
};
export default Login;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）