5. Antd 表单验证

安装

yarn add antd

引入样式

@import '~antd/dist/antd.css';

antd 表单验证

方法一: 在 rules 中添加简单规则验证

<Form.Item
  label="密码"
  name="password"
  rules={[{ required: true, message: '请输入密码!' }, {
    min: 4,
    message: '最少4个字符'
  }, {
    max: 16,
    message: '最多16个字符'
  }]}
>
  <Input.Password />
</Form.Item>

方法二: 在 rules 中返回一个 validator 函数实现表单验证

<Form.Item
  label="用户名"
  name="username"
  rules={[{ required: true, message: '请输入用户名!' }, () => ({
    validator(_, value=''){
      if(/\W/.test(value)) return Promise.reject('只能由字母数字下划线组成')
      if(value.length > 10) return Promise.reject('最多10个字符')
      if(value.length < 3) return Promise.reject('最少3个字符')
      return Promise.resolve()
    }
  })]}
  >
  <Input />
</Form.Item>
<Form.Item
  label="确认密码"
  name="ConfirmPassword"
  rules={[{ required: true, message: '请输入确认密码!' }, ({ getFieldValue }) => ({
    validator(_, value='') {
      if (!value || getFieldValue('password') === value) {
        return Promise.resolve();
      }
      return Promise.reject(new Error('两次密码输入不一致!'));
    },
  }),]}
  >
  <Input.Password />
</Form.Item>

注意 validator 的参数 value 要给一个默认值，否则当什么都不输入直接提交时会报错
Validation error on field ‘username’

给 input 设置默认值

在 Form 的 initialValues 中给 Item 中的 input 设置默认值

<Form
  name="basic"
  initialValues={{ username: 'jack', password: '1234', remember: true }}
  onFinish={onFinish}
  onFinishFailed={onFinishFailed}
  autoComplete="off"
>
  <Form.Item
    name="username"
    rules={[{ required: true, message: '请输入用户名!' }]}
  >
    <Input
      prefix={<UserOutlined className="site-form-item-icon" />}
      placeholder="用户名"
    />
  </Form.Item>
  // ...