react + antd之Form常用校验

必填校验

<Form.Item
    label="用户昵称"
    name="nickName"
    rules={[
        {
            required: true,
            message: '必填',
        }
    ]}
>
    <Input />
</Form.Item>

输入框字符限制

• 指定范围

<Form.Item
    label="新密码"
    name="newPwd"
    rules={[
        {
            required: true,
            message: '新密码不能为空',
        },
        {
            max: 20,
            message: '长度在6到20个字符',
        },
        {
            min: 6,
            message: '长度在6到20个字符',
        },
    ]}
>
    <Input.Password />
</Form.Item>

• 指定长度

<Form.Item
    label="新密码"
    name="newPwd"
    rules={[
        {
            required: true,
            message: '新密码不能为空',
        },
        {
            len: 20,
            message: '长度必须为20个字符',
        }
    ]}
>
    <Input.Password />
</Form.Item>

自定义校验

validator属性自定义效验

 <Form.Item
    label="确认密码"
    name="checkPwd"
    dependencies={['newPwd']}
    hasFeedback
    rules={[
        {
            required: true,
            message: '确认密码不能为空',
        },
        ({ getFieldValue }) => ({
            validator(rule, value) {
              if (!value || getFieldValue('newPwd') === value) {
                return Promise.resolve();
              }
              return Promise.reject('两次输入的密码不一致');
            },
        }),
    ]}
>
    <Input.Password />
</Form.Item>

whitespace空格报错

如果字段仅包含空格则校验不通过

<Form.Item
    label="用户昵称"
    name="nickName"
    rules={[
        {
            required: true,
            message: '必填',
        },
        {
            whitespace: true,
            message: '昵称为空字符',
        }
    ]}
>
    <Input />
</Form.Item>

pattern正则验证

<Form.Item
    label="手机号码"
    name="phonenumber"
    rules={[
        {
            required: true,
            message: '必填',
        },
        {
            message:'手机号码有误',
            pattern: /^1[3456789]\d{9}$/
        }
    ]}
>
    <Input />
</Form.Item>

js 正则对象