ant design-form表单的自定义校验validator

• 在form表单的使用中，我们经常是使用rules属性进行简单输入文本验证，常见的使用模式如下：rules={[{ required: true, message: ‘’ }

<Form
  name="basic"
    ref={ref}
    labelCol={{
      span: 4,
    }}
    wrapperCol={{
      span: 16,
    }}
  >
    <Form.Item
      label="password"
      name="password"
      rules={[{ required: true, message: 'xxxx' }  >
      <Input />
    </Form.Item>
  </Form>

• 仅使用rules={[{ required: true, message: ‘xxxx’ ‘’ }模式只能简单验证输入用户是否输入文本，不能动态判断用户是否输入指定规则数据
• antd的form的rules支持validator方式添加自定义校验，通过接收 Promise 作为返回值，Promise.reject(‘验证不通过提示信息’)，Promise.resloce()通过验证
• 一个简单的用户密码自定义校验如下

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, Button, Checkbox } from 'antd';

const Demo = () => {
  const ref = useRef();
  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const changName = (errorInfo) => {
    // 获取表格数据
    const formData = ref.current.getFieldsValue();
    // 动态判断输入文本是否符合检验条件
    // 长度为8-18位数
    if (formData.password.length < 8 || formData.password.length > 18) {
      return Promise.reject('请输入8-18位密码')
    }
    const reg = /^((?=.*\d)(?=.*[a-z])(?=.*[A-Z])|(?=.*\d)(?=.*[A-Z])(?=.*[_!@#$%^&*()?=\[\]])|(?=.*\d)(?=.*[a-z])(?=.*[_!@#$%^&*()?=\[\]])|(?=.*[A-Z])(?=.*[a-z])(?=.*[_!@#$%^&*()?=\[\]])).{8,18}$/
    const flag = reg.test(formData.password)
    if (!flag) {
      return Promise.reject('数字、大写字母、小写字母、特殊字符至少3种, 特殊字符仅限于：_!@#$%^&*()?=[]')
    }
    // 通过验证
    return Promise.resolve()
  };

  return (
    <Form
      name="basic"
      ref={ref}
      labelCol={{
        span: 4,
      }}
      wrapperCol={{
        span: 16,
      }}
    >
      <Form.Item
        label="password"
        name="password"
        rules={[{ required: true, message: '' }, { validator: changName }]}      >
        <Input />
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, document.getElementById('container'));

• form表单的校验默认方式为onChange事件触发，但是有时候，交互体验师会希望用户输入过程中不要动态校验，而是希望在input失焦事件后才进行校验，这时候需要配置Form.Item的validateTrigger属性，统一设置字段触发验证的时机，默认值为onChange，将其设置为onBlur即可

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, Button, Checkbox } from 'antd';

const Demo = () => {
  const ref = useRef();
  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const changName = (errorInfo) => {
    // 获取表格数据
    const formData = ref.current.getFieldsValue();
    // 动态判断输入文本是否符合检验条件
    // 长度为8-18位数
    if (formData.password.length < 8 || formData.password.length > 18) {
      return Promise.reject('请输入8-18位密码');
    }
    const reg =
      /^((?=.*\d)(?=.*[a-z])(?=.*[A-Z])|(?=.*\d)(?=.*[A-Z])(?=.*[_!@#$%^&*()?=\[\]])|(?=.*\d)(?=.*[a-z])(?=.*[_!@#$%^&*()?=\[\]])|(?=.*[A-Z])(?=.*[a-z])(?=.*[_!@#$%^&*()?=\[\]])).{8,18}$/;
    const flag = reg.test(formData.password);
    if (!flag) {
      return Promise.reject(
        '数字、大写字母、小写字母、特殊字符至少3种, 特殊字符仅限于：_!@#$%^&*()?=[]'
      );
    }
    // 通过验证
    return Promise.resolve();
  };

  return (
    <Form
      name="basic"
      ref={ref}
      labelCol={{
        span: 4,
      }}
      wrapperCol={{
        span: 16,
      }}
    >
      <Form.Item
        label="password"
        name="password"
        validateTrigger="onBlur"
        rules={[{ required: true, message: '' }, { validator: changName }]}
      >
        <Input />
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, document.getElementById('container'));