react antd注册账号Form 表单组件

注册账号Form 表单组件

<Form form={form} name="normal_login" className="login-form" initialValues={{ remember: true }}>
        <Form.Item
          name="username"
          rules={[
            { required: true, message: '请输入你的账号!' },
            { pattern: /^[^\s]*$/, message: '禁止输入空格！' },
            { min: 6, max: 20, message: '账号长度在 6 到 20 个字符' },
          ]}>
          <Input placeholder="账号" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            { required: true, message: '请输入你的账号!' },
            { pattern: /^[^\s]*$/, message: '禁止输入空格！' },
            { min: 6, max: 20, message: '密码长度在 6 到 20 个字符' },
          ]}
          hasFeedback>
          <Input.Password placeholder="密码" />
        </Form.Item>
        <Form.Item
          name="confirm"
          dependencies={['password']}
          hasFeedback
          rules={[
            {
              required: true,
              message: '请确认你的密码!',
            },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve()
                }
                return Promise.reject(new Error('两次输入的密码不一样'))
              },
            }),
          ]}>
          <Input.Password placeholder="确认密码" />
        </Form.Item>
      </Form>

其中的 rules属性,可对输入做出限制

rules={[
           { required: true, message: '请输入你的账号!' },
           { pattern: /^[^\s]*$/, message: '禁止输入空格！' },
           { min: 6, max: 20, message: '账号长度在 6 到 20 个字符' },
       ]}

required：必填字段，即非空验证

pattern：正则表达式

min/max：判断数据大小范围，通常对数字大小范围做校验

len：长度验证，如11位手机号码。

enum：枚举值验证

whitespace:验证是否只有空格(如果没有该配置，则全空格的输入值也是有效的）

transform：有时有必要在验证之前转换值，以强制或以某种方式对其进行清理。为此 transform ，向验证规则添加一个功能。在验证之前，先转换属性，然后将其重新分配给源对象，以更改该属性的值。