antd 校验表单时触发对其他表单的校验

最新推荐文章于 2024-03-28 17:48:47 发布

lh_guojw

最新推荐文章于 2024-03-28 17:48:47 发布

阅读量1.6w

点赞数 8

CC 4.0 BY-SA版权

分类专栏： antd

本文链接：https://blog.youkuaiyun.com/lh_guojw/article/details/88751573

antd 专栏收录该内容

1 篇文章

订阅专栏

博客介绍了表单校验相关内容，如设置 validateTrigger: ‘onBlur’，让密码输入框失去焦点时校验以优化体验；还提到手动触发用户名校验规则，需用 getFieldDecorator() 包装用户名输入控件，且设置 force 为 true 可使已校验表单域再次校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import { Form, Input } from 'antd';
import React, { Component } from 'react';

class ComponentA extends Component {
  constructor(props) {
    super(props);
  }

  /**
   * 
   * @param {} rule 
   * @param {String} vaule 
   * @param {Function} callback 
   */
  checkPsd(rule, value, callback) {
    if (value) {
      this.props.form.validateFields(['userName'], { force: true });
    }
  }
  render() {
    const FormItem = Form.Item;
    const { getFieldDecorator } = this.props.form;

    return (
      <Form>
        <FormItem label='用户名：'>
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: '请输入用户名' }]
          })(
            <Input />
          )}
        </FormItem>
        <FormItem label='密码：'>
          {getFieldDecorator('password', {
            rules: [
              { required: true, message: '请输入密码' },
              { validator: (rule, value, callback) => { this.checkPsd(rule, value, callback) } }
            ],
            validateTrigger: 'onBlur'
          })(
            <Input />
          )}
        </FormItem>
      </Form>
    )
  }
}

export default Form.create()(ComponentA);

其中：validateTrigger: ‘onBlur’，当密码输入框失去焦点时才去校验，为了优化用户体验

this.props.form.validateFields['userName', { force: true }]; 手动触发用户名的校验规则，注意用户名输入控件必须要经过getFieldDecorator()包装，至于为什么要进行包装，可以去官网看文档说明。另外要设置force的值为true，对已经校验过的表单域，在 validateTrigger 再次被触发时再次校验。

完...