Ant Design表单:如何为同一字段设置不同触发时机下的多重校验规则?
Ant Design 3 的 Form 表单如何为单个字段设置多个校验规则,并分别指定其触发时机(例如,onChange 或 onBlur)?本文将提供一种高效的解决方案,避免自定义组件的复杂性。
假设需要为一个字段设置三个校验规则:前两个在值改变时 (onChange) 立即校验,最后一个在失去焦点时 (onBlur) 校验。直接使用 rules 属性并不能满足这一需求。
解决方案:
核心思路是将校验规则分组,并利用 form.validateFields 方法在 onBlur 事件中手动触发特定规则的校验。
const rules = [ { required: true, message: '必填', trigger: 'onChange' }, { pattern: /^[a-z]+$/i, message: '只能输入字母', trigger: 'onChange' }, { min: 6, message: '至少6个字符', trigger: 'onBlur' }, ];
const MyComponent = ({ form }) => { const [fieldName] = useState('myField'); // 要校验的字段名 const handleBlur = () => { form.validateFields([fieldName]) .then(() => { // 校验成功后的操作 }) .catch((errorInfo) => { // 校验失败后的操作 }); }; return ( <Form.Item label="我的字段" name={fieldName} rules={rules.filter(rule => rule.trigger === 'onChange')}> <Input onBlur={handleBlur} /> </Form.Item> ); };
注意:rules 属性中只包含 trigger: 'onChange' 的规则,onBlur 规则在 handleBlur 函数中通过 form.validateFields 方法触发。
通过这种方法,我们利用了 Ant Design Form 的内置校验机制,并通过手动触发 validateFields 来实现不同触发时机的多重校验,避免了直接修改样式而无法影响表单校验结果的问题,从而保持了表单校验的完整性和灵活性。
以上就是Ant Design表单:如何为同一字段设置不同触发时机的多重校验规则?的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号