《PC端UI框架》Ant Design V4 中表单校验

通过 rules 校验规则：

常用的 rules 校验规则：

1. len：字段长度。
2. max：最大长度。
3. min：最小长度。
4. required：是否必选。
5. pattern：正则表达式校验。
6. validator：自定义校验。
7. message：校验文案。

// 类组件
import React from 'react'
import { Form, Input, Button } from 'antd';
	
class ClassForm extends React.Component {
	// 创建表单实例
	formRef = React.createRef()
	
	handleSave = async () => {
	  // 通过表单实例触发表单验证
	 // 如果校验不通过，将不会继续执行下面的代码；如果校验通过，可获取到表单域的值
	  const values = await this.formRef.current.validateFields()
    }
	
	render(){
	  return (
	    <Form ref={this.formRef}>
	      <Form.Item name="title" rules={[
	      	{required: true, message: '请输入标题'}，
	      	{max: 20, message: '最多输入20个字'}，
	      ]} >
	       <Input />
	          </Form.Item>
	       <Form.Item>
	          <Button type="primary" onClick={this.handleSave}> 保存</Button>
	       </Form.Item>
	      </Form>
	  )
	}
}
	
export default ClassForm

// 函数式组件
import { Form, Input, Button } from 'antd';
	
const FuncForm = () => {
	const [form] = Form.useForm();
	
	const handleSave = async  () => {
	  // 通过表单实例触发表单验证
	 // 如果校验不通过，将不会继续执行下面的代码；如果校验通过，可获取到表单域的值
	  const values = await form.validateFields()
	}
	return (
	    <Form form={form} >
	      <Form.Item name="title" rules={[{required: true, message: '请输入标题'}]}>
	        <Input />
	      </Form.Item>
	      <Form.Item>
	        <Button type="primary" onClick={handleSave}> 保存</Button>
	      </Form.Item>
	    </Form>
	)
}
	
export default FuncForm

rules 校验规则中的 validator：

rules 校验规则中的 validator 可以自定义校验的规则。

// Callback 方式：rule 是规则；val 是输入的值；callback 是回调函数，如果有字符串，代表校验未通过；如果为空，代表校验通过
handleValidate = (rule, val, callback) => {
	if (!val) {
	    // 校验不通过
       callback('请输入标题')
    }
   
   // 校验通过
   callback()
}

// 或者 Promise 方式：
handleValidate = (rule, val) => {
	if (!val) {
	    // 校验不通过
       return Promise.reject('请输入标题')
    }
   
   // 校验通过
   return Promise.resolve()
}

<Form.Item name="title" rules={[{validator: this.handleValidate}]} >
	  <Input />
</Form.Item>

Form.Item 嵌套时显示必填的 * 号：

Form.Item 嵌套时如果想要显示必填的 * 号，必须给外层的 Form.Item 添加 required 属性。

<Form.Item label='使用截止时间' labelCol={{span: 6}} required>
      <Form.Item
          name='valid_until'
          rules={[{required: true, message: '请选择使用截止时间'}]}
      >
          <DatePicker>
     </Form.Item>
     <span>请确认结束时间，逾期后，将无法使用</span>
</Form.Item>

自定义校验的时机和内容：

通过 validateStatus、help、hasFeedback 等属性，可以不通过 Form 自己定义校验的时机和内容。

<Form>
    <Form.Item
      label="标题"
      name="title"
      extra="我是额外的提示信息extra"
      tooltip="我是配置提示信息tooltip"
      validateStatus="success"  // 校验的状态
      hasFeedback  //校验的图标
      help="我是校验的文案" // 校验的文案
    >
      <Input />
    </Form.Item>
</Form>