Form表单验证 - form rules 表单项验 - 《React技术栈⚛️》

async-validator
formRef hasFeedback
- pattern正则验证
validator 自定义验证
- antd form 3x

表单常用的校验

required：是否必选
enum：枚举类型
len：字段长度
max：最大长度
min:最小长度
transform 转换

async-validator

https://github.com/yiminghe/async-validator#type
Indicates the type of validator to use. Recognised type values are:

string: Must be of type string. This is the default type.
number: Must be of type number.
boolean: Must be of type boolean.
method: Must be of type function.
regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
integer: Must be of type number and an integer.
float: Must be of type number and a floating point number.
array: Must be an array as determined by Array.isArray.
object: Must be of type object and not Array.isArray.
enum: Value must exist in the enum.
date: Value must be valid as determined by Date
url: Must be of type url.
hex: Must be of type hex.
email: Must be of type email.
any: Can be any type.

常用的表单校验规则 rules

参数	说明	类型
len	字段长度	Number
max	最大长度	Number
min	最小长度	Number
message	校验文案	String
pattern	正则表达式校验	Regexp
required	是否必选	Boolean
type	内置校验类型	String
validator	自定义校验函数	Function
whitespace	必须时，空格是否会被视为错误	Boolean

import Schema from 'async-validator';
const rules = [
  { required: true, message: '请输入用户名' }, // type: 'string' 默认
  {
    type: 'url',
    message: '<mark>请输入 URL</mark>', // jsx格式
  },
  {
    type: 'email',
    pattern: Schema.pattern.email, // 自定义正则表达式
    message: () => this.$t('email is required'), // 多语言
  },
  { type: 'hex', message: '请输入用户名' },
  { type: 'date', message: '请输入用户名' },
  { type: 'boolean', message: '请输入用户名' },
  { type: 'method', message: '请输入用户名' },
  { type: 'enum', enum: ['admin', 'user', 'guest'], message: '请输入用户名' },
  // 指定范围
  { min: 6, max: 20, message: '用户名6-20个字符' },
  // 字段包含空格，校验不通过
  { whitespace: true, message: '不能输入空格' },
  // 指定长度
  { type: 'any', len: 20, message: '请输入用户名' },
]
// number
const numberRules = [
  { required: true, type: 'number', message: '请输入数字' },
  { type: 'integer', message: '请输入数字' },
  { type: 'float', message: '请输入用户名' },
  {
    required: true,
    whitespace: true,
    type: 'number',
    transform(value) {
      // 将字符串转换成数字
      if(value) return Number(value)
    }
  }
]
// array
const arrayRules = [
  {
    required: true,
    type: 'array',
    len: 3,
    fields: {
      0: { type: 'string', required: true, message: '请输入用户名' },
      1: { type: 'string', required: true, message: '请输入用户名' },
      2: { type: 'string', required: true, message: '请输入用户名' },
    },
  },
  {
    required: true,
    type: 'array',
    defaultField: { type: 'url' },
  },
]
// object
const objectRules = [
  {
    required: true,
    type: 'object',
    fields: {
      street: { type: 'string', required: true, message: '请输入街道' },
      city: { type: 'string', required: true, message: '请输入城市' },
      zip: { type: 'string', required: true, len: 8, message: '无效的 zip压缩文件' },
    },
    options: { first: true },
  },
]
// validator 自定义校验
const customRules = [
  {
    validator(rule, value, callback) {
      if (value === 'test') {
        return Promise.resolve();
      }
      return Promise.reject('两次输入的密码不一致');
    },
  },
  {
    validator(rule, value, callback) {
      return new Error(`${value} is not equal to 'test'`);
    },
  },
]

formRef hasFeedback

validateStatus: 校验状态，可选 ‘success’, ‘warning’, ‘error’, ‘validating’
hasFeedback：用于给输入框添加反馈图标
help：设置校验文案 ```tsx import React from ‘react’; import { Button, Form, Input, Select } from ‘antd’; import type { FormInstance } from ‘antd/es/form’;

function App() { const formRef = React.useRef(null);

const onReset = () => { formRef.current?.resetFields(); };

const onFill = () => { formRef.current?.setFieldsValue({ note: ‘Hello world!’, price: 200 }); };

return(
<Form
  ref={formRef}
  labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
  initialValues={{ remember: true }}
  onFinish={onFinish}
  onFinishFailed={onFinishFailed}
  autoComplete="off" // 关闭自动填充
>
  <Form.Item
      name="price"
      label="价格" 
      hasFeedback
    validateStatus="success"
    labelWrap
    wrapperCol={{ flex: 1 }}
  >
      <InputNumber/>
  </Form.Item>
</Form>

) }


<a name="RIigF"></a>
### useForm
```tsx
import { Button, Form, Input, Select } from 'antd';
function App() {
  const [form] = Form.useForm();
  // const [form] = Form.useForm<{ name: string; price: number }>();
  const priceValue = Form.useWatch('price', form);
    return(
    <Form
      form={form}
      labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
          name="price"
          label="价格" 
          rules={[
          { required: true, type: 'integer', message: '请输入数字' },
        ]}
      >
          <InputNumber/>
      </Form.Item>
      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  )
}

pattern正则验证

手机号码验证

const rules = [
  {
    required: true,
    pattern: /^1[3-9]\d{9}$/,
    max: 11,
    message: '手机号码错误',
  },
  validateTrigger: 'onBlur' // onFocus
]
const patternRules = [
  { type: 'regexp', message: '请输入数字' },
  {
    pattern: new RegExp(/^[0-9a-zA-Z_]{1,}$/, 'g'),
    message: '请输入数字，字母，下划线',
  },
  {
    pattern: /^[0-9a-zA-Z]{6,16}$/,
    message: '密码长度为6-16位，只能包含数字和英文',
  },
  {
    pattern: /(^\d{15}$)|(^\d{17}([0-9]|X)$)/g,
    message: '身份证号码错误',
  },
  {
    pattern: /^1[3-9]\d{9}$/,
    max: 11,
    message: '手机号码错误',
  },
  {
    type: 'string',
    pattern: /^[0-9]+$/,
    message: '只能输入数字',
  },
]

validator 自定义验证

https://ant.design/components/form-cn#rule
antd form 4x 验证返回 Promise，validator(rule, value) => Promise

const passwordRules = [
  { required: true, message: '请输入密码' },
  // form
  ({ getFieldValue }) => ({
    validator(_, value) {
      if (!value || getFieldValue('password') === value) {
        return Promise.resolve();
      }
      return Promise.reject(new Error('两次密码输入不一致!'));
    },
  }),
]
const agreementRules = [
  {
    validator: (rule, value) => {
      if (value) return Promise.resolve();
      return Promise.reject(new Error('请阅读并勾选协议'))
    }
  }
]
// validator 自定义校验
const customRules = [
  {
    validator(rule, value) {
      if (value === 'test') {
        return Promise.resolve();
      }
      return Promise.reject('两次输入的密码不一致');
    },
  },
  {
    validator(rule, value) {
      return new Error(`${value} is not equal to 'test'`);
    },
  },
]

antd form 3x

https://github.com/ant-design/ant-design/issues/5155
validator(rule 规则，value 输入的值，callback 回调函数)

必须要调用 callback，不管你 callback返回不返回提示的内容，都要写callback这个函数。

不返回内容写个空的callback()

如果不写的话，在form表单中用 props.form.validateFields校验是进不来 if(!err) 这个判断中的

form.validateFields((err, values)=>{
// 如果在请求成功后不写 callback() 那么是进不来这个判断中的
if(!err){}
})

在getFieldDecorator包装的控件，表单控件会自动的添加value。可能这样说是不正确的，

因为在getFieldDecorator之后，需要使用initialValue来动态绑定这个input的value值
rules这里面可以定义这个表单的触发时间，长度，必填项，以及提示语等等东西 ```javascript function checkValue(rule, value, callback) {
if(value.length > 0){ if (rule.pattern.test( value )) {
```
callback()
```
} else {
```
callback('请输入正确的手机号码');
```
} } callback(‘手机号码不能为空’) }

// validator 自定义校验 const rules =[ { required: true, message: ‘请再次输入密码’ }, { validator: passwordValidator } ]

// 密码验证 export function passwordValidator(rule, value, callback) { const { getFieldValue } = form; if (value && value !== getFieldValue(‘password’)) { callback(‘两次输入不一致！’) } // 必须总是返回一个 callback，否则 validateFields 无法响应 callback(); } ```