当我们开发一个React单页应用时，表单往往是与用户交互最密集的部分。因此，表单校验是一个十分重要的功能。本文将介绍在React SPA应用中实现动态表单校验的最佳实践。
1. 动态表单校验的必要性
表单校验有两个方面的必要性。首先，根据用户输入的和定义的规则，验证表单数据或文件是否符合预期，保证前后端安全；其次，向用户展示错误信息，提示更正并重新提交。
在复杂表单场景下，需要动态控制输入内容、校验规则以及触发时机。这就需要根据当前表单状态动态生成校验规则。
2. 动态表单校验的实现方式
在React中我们可以通过以下两种方式实现动态表单校验：
2.1. 手动检查
对于简单而言，可以让用户完成表单填写后点击“提交”按钮进行手动校验。如果有错误，则弹出错误提示框，并提供相应的修复。
手动检查的优点是可靠性高，但缺点在于每次提交前必须手动确认，涉及到多个异步过程时不够灵活。
2.2 表单库解决方案
表单库会提供一个可重用的组件库来呈现表单，通常包含属性、默认值和规则属性。不同的表单可以使用相同的校验规则进行校验。
jQuery Validation 和 Ant Design 是两个热门的表单库，都提供了到处城市化的 error message 和 flexiable rule 配置。
3. 示例代码
以下是手动检查（方法一）和表单库解决方案（方法二）的示例代码。
// javascriptcn.com 代码示例
// 动态表单校验 (方法一)
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
const value = this.state.value;
const regex = /^[a-z]+$/;
if (!regex.test(value)) {
alert('请只输入小写字母！');
event.preventDefault();
}
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div>
<label for="username">请输入用户名（小写字母）：</label>
<input id="username" type="text" value={this.state.value} onChange={this.handleChange} />
</div>
<input type="submit" value="提交" />
</form>
);
}
}
// 动态表单校验 (方法二)
import Form from 'antd/lib/form';
import Input from 'antd/lib/input';
export default function DynamicValidationForm(props) {
const { getFieldDecorator } = props.form;
return (
<Form>
<Form.Item label="用户名">
{getFieldDecorator('username', {
rules: [
{ required: true, message: '不能为空' },
{ pattern: /^[a-z]+$/, message: '请只输入小写字母' },
],
})(<Input />)}
</Form.Item>
</Form>
);
}4. 总结
动态表单校验是一个常见的场景，在复杂表单下，动态生成规则处理和异步处理对开发者来说都是挑战。本文介绍了两种实现动态表单校验的方法，手动检查和表单库解决方案，希望读者可以参考此文提高效率和性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652917977d4982a6ebba8180