AntDesign表单的理解与使用
基本介绍
虽然 react 没有内置的表单验证逻辑，但是我们可以使用 react 组件库 AntDesign 中的表单组件 Form 来实现这一需求。具体地， AntDesign 中的表单组件 Form 与表单域 Form.Item（用于包裹任意输入控制的容器）配合使用：在 Form.Item 中设置校验规则，在表单提交或表单输入变化时，通过执行 this.props.form.validateFields() 来实现表单值的校验。在 Form.Item 中放置一个被 getFieldDecorator 注册的表单控件（子元素）来实现表单控件与表单的双向绑定，实现表单值的收集。
使用 Form 自带的自动收集数据和校验功能的关键是需要使用 Form.create() 包装组件。Form.create() 是一个高阶函数，通过传入一个 react 组件，返回一个新的具有注册、收集、校验功能的 react组件。使用方式如下：
class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);
export default CustomizedForm;
经 Form.create() 包装过的组件会自带 this.props.form 属性，该属性提供了许多 api 来处理数据，如上面介绍的 getFieldDecorator 方法 则是用于和表单进行双向绑定。组件一旦经过 getFieldDecorator 的修饰，那么该组件的值将完全由 Form 接管。
我们知道，组件的更新有两种方式：1. 父组件更新；2. 自身状态发生改变。
使用 Form.create() 包装组件的目的就是为了使用第一种方式更新被包装组件：一旦被 getFieldDecorator 修饰过的组件触发onChange事件，便会触发这个父组件的的更新(forceUpdate)，从而促使被包装组件的更新。上面提到的 Form.create({})(CustomizedForm), CustomizedForm就是我们所说的被包装组件。
下面将介绍 this.props.form 属性提供的几种 API 和使用方法，其他 API 可具体查看文档。
this.props.form 属性提供的 API
getFieldDecorator
getFieldDecorator 方法的目的是为了把需要收集的数据在实例中进行注册，并把注册的值同步到被 getFieldDecorator 修饰的表单控件上，所以该控件不能再通过 value 或 defaultValue 赋值，它的状态将全部由 getFieldDecorator 托管，默认值设置可以用 getFieldDecorator 里的 initialValue。 使用方式如下：
// 语法：getFieldDecorator(id, options)
<Form.Item {...layout} label="题目" extra={titleExtra}>
{getFieldDecorator('name', {
rules: [
{ required: true, message: '记得填写题目' },
{ whitespace: true, message: '记得填写题目' },
],
initialValue: name, // 默认值设置
})(<Input allowClear={true}/>)}
</Form.Item>
getFieldValue
getFieldValue 方法的作用是获取一个输入控件的值。使用方法如下：
let options = this.props.form.getFieldValue('name'); // 使用getFieldDecorator方法修饰的id为'name'的表单控件
setFieldsValue
setFieldsValue方法用于动态设置一组输入控件的值（⚠️注意：不要在 componentWillReceiveProps 内使用，否则会导致死循环）。使用方法如下：
// 设置使用getFieldDecorator方法修饰的id为'name'的表单控件的值
this.props.form.setFieldsValue({ name: undefined });
validateFields
validateFields方法用于校验并获取一组输入域的值与错误，使用方法如下(若 fieldNames 参数为空，则校验全部组件)：
/*
类型：
(
[fieldNames: string[]],
[options: object],
callback(errors, values)
) => void
*/
const { form: { validateFields } } = this.props;
validateFields((errors, values) => {
// ...
});
validateFields(['field1', 'field2'], (errors, values) => {
// ...
});
validateFields(['field1', 'field2'], options, (errors, values) => {
// ...
});
// 通过 validateFields 方法验证表单是否完成填写，通过便提交添加操作。
handleOk = () => {
const { dispatch, form: { validateFields } } = this.props;
validateFields((err, values) => {
if (!err) {
dispatch({
type: 'cards/addOne',
payload: values,
});
// 重置 `visible` 属性为 false 以关闭对话框
this.setState({ visible: false });
}
});
}格式限制验证
AntDesign 中表单的功能很多，其中，表单输入格式验证是通过设置 getFieldDecorator(id, options) 方法中传入的校验规则参数 options.rules 来实现，下面就为大家整理了一下 AntDesign 中常用的几种表单输入格式验证。
输入框不能为空限制
实例代码：
{getFieldDecorator('name', {
rules: [{
required: true,
message: '名称不能为空',
}],
})(<Input placeholder="请输入名称" />)}
输入框字符限制
字符长度范围限制：
{getFieldDecorator('password', {
rules: [{
required: true,
message: '密码不能为空',
}, {
min:4,
message: '密码不能少于4个字符',
}, {
max:6,
message: '密码不能大于6个字符',
}],
})(<Input placeholder="请输入密码" type="password"/>)}
字符长度限制：
{getFieldDecorator('nickname', {
rules: [{
required: true,
message: '昵称不能为空',
}, {
len: 4,
message: '长度需4个字符',
}],
})(<Input placeholder="请输入昵称" />)}
自定义校验
validator属性自定义效验，必须返回一个callback：
{getFieldDecorator('passwordcomfire', {
rules: [{
required: true,
message: '请再次输入密码',
}, {
validator: passwordValidator
}],
})(<Input placeholder="请输入密码" type="password"/>)}
// 密码验证
const passwordValidator = (rule, value, callback) => {
const { getFieldValue } = form;
if (value && value !== getFieldValue('password')) {
callback('两次输入不一致！')
}
// 必须总是返回一个 callback，否则 validateFields 无法响应
callback();
}
whitespace空格报错
若输入只有一个空格，则会报错：
{getFieldDecorator('nickname', {
rules: [{
whitespace: true,
message: '不能输入空格',
} ],
})(<Input placeholder="请输入昵称" />)}
pattern正则验证
如果输入的不是数字，则提示错误：
{getFieldDecorator('age', {
rules: [{
message:'只能输入数字',
pattern: /^[0-9]+$/
}],
})(<Input placeholder="请输入数字" />)}作者：前端小黑
链接：https://juejin.im/post/5d63c252f265da03aa257b8c
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！