ant Design 自定义表单验证规则

最新推荐文章于 2025-05-21 15:48:33 发布

老班老班

最新推荐文章于 2025-05-21 15:48:33 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： antDesign 表单自定义验证规则

本文链接：https://blog.youkuaiyun.com/weixin_42424269/article/details/88375103

js 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一种在Ant Design中使用Form表单组件进行实时验证的方法，通过自定义验证规则检查新密码与确认密码是否一致，避免了用户提交表单后才收到错误提示的情况。

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

如果你不想最后提交表单的时候才给出用户错误的提示，那么你可以这么写
这个例子是验证你输入的新密码是否一致的问题

<Row>
            <Col span={24}>
              <FormItem {...formItemLayout} label={'新密码'}>
                {getFieldDecorator('newPassword', {
                  initialValue: currentUserdata.newPassword || '',
                  rules: [
                    {
                      required: true,
                      whitespace: true,
                      max: 11,
                      message: formatMessage({id: 'validation.userName.required'}),
                    }
                  ],
                })(<Input placeholder={"请输入新密码"}/>)}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <FormItem {...formItemLayout} label={'确认新密码'}>
                {getFieldDecorator('newPsw', {
                  initialValue: '',
                  rules: [
                    {
                      required: true,
                      whitespace: true,
                      max: 11,
                      message: formatMessage({id: 'validation.userName.required'}),
                    },
                    {validator: this.checkConfirm}      //在这里加入验证规则
                  ],
                })(<Input placeholder={"请确认新密码"}/>)}
              </FormItem>
            </Col>
          </Row>

 checkConfirm = (rule, value, callback) => {
    const {form} = this.props;
    const newPsw = form.getFieldValue('newPassword');
    if (newPsw != value) {
      callback('新密码不一致!');
    }
    else {
      callback();
    }
  }

这样就可以实现立即验证了