antd 验证时 获取其他表单值

### 回答1：
在使用 antd 进行表单验证时，如果需要获取其他表单项的值进行逻辑判断，则可以通过自定义校验函数来实现。比如，我们需要判断输入的密码和确认密码是否一致，就需要获取确认密码的值来进行比较。

首先，在需要运用验证的表单组件中，需要引入 antd 的 Form 组件，并使用 getFieldDecorator 方法进行包装。在 getFieldDecorator 方法中，可以传入自定义的校验函数 validator，函数中的参数 rule 和 value 分别代表当前被验证的表单项和其对应的值。我们可以通过 Form 对象的 getFieldValue 方法来获取其他表单项的值，然后在校验函数中进行比较。

例如：

import { Form, Input, Button } from 'antd';

const CustomForm = () => {
  const handleSubmit = e => {
    e.preventDefault();
    // 处理表单提交事件
  };

  const compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('两次输入的密码不一致');
    } else {
      callback();
    }
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Item label="密码">
        {getFieldDecorator('password', {
          rules: [{ required: true, message: '请输入密码！' }],
        })(<Input type="password" placeholder="请输入密码" />)}
      </Form.Item>
      <Form.Item label="确认密码">
        {getFieldDecorator('confirmPassword', {
          rules: [
            { required: true, message: '请确认密码！' },
            { validator: compareToFirstPassword },
          ],
        })(<Input type="password" placeholder="请确认密码" />)}
      </Form.Item>
      <Button type="primary" htmlType="submit">提交</Button>
    </Form>
  );
};

在上面的例子中，我们定义了校验函数 compareToFirstPassword，它会比较确认密码表单项的值和密码表单项的值，如果不一致，则提示错误信息。在比较时，我们使用 this.props.form.getFieldValue('password') 方法获取密码表单项的值。注意，这里需要通过 props 传递 Form 对象，或者通过高阶组件 Form.create() 包装组件来获取 Form 对象。

除了在自定义校验函数中获取其他表单项的值外，在表单提交事件中也可以通过 this.props.form.getFieldsValue() 方法获取所有表单项的值。这个方法会返回一个对象，包含所有表单项的键值对。

### 回答2：
antd是一个基于React的UI组件库，它提供了一系列的组件如表单(Form)，表单验证是表单功能中的重要部分。在实际使用中，我们可能会遇到需要在验证中获取其他表单值的情况。下面就是关于在antd表单验证时获取其他表单值的详细解释。

为了方便，我们先来复习一下antd表单验证的基本用法。antd提供了一个高阶组件`Form.create()`，用于将一个组件变成表单。我们可以定义一个包含验证规则和初始值的表单组件，然后使用`Form.create()`将其转换为一个antd表单组件。

例如，我们可以定义一个包含两个表单项（用户名和密码）的组件，并设置它们的初始值和验证规则：

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

const LoginForm = (props) => {
  const { getFieldDecorator } = props.form;
  return (
    <Form>
      <Form.Item label="用户名">
        {getFieldDecorator('username', {
          initialValue: '',
          rules: [
            { required: true, message: '请输入用户名' },
            { pattern: /^[a-zA-Z0-9_-]{4,16}$/, message: '用户名必须为4-16位字母或数字' },
          ],
        })(<Input />)}
      </Form.Item>
      <Form.Item label="密码">
        {getFieldDecorator('password', {
          initialValue: '',
          rules: [
            { required: true, message: '请输入密码' },
            { pattern: /^[a-zA-Z0-9_-]{6,18}$/, message: '密码必须为6-18位字母或数字' },
          ],
        })(<Input.Password />)}
      </Form.Item>
    </Form>
  );
}

export default Form.create({ name: 'login' })(LoginForm);

上面的代码定义了一个名为`LoginForm`的组件，包含两个表单项：`username`和`password`。每个表单项都被封装在`getFieldDecorator`函数中，并设置了初始值和验证规则。`Form.create()`函数将整个组件转换为一个antd表单组件，并指定表单名称为`login`。

接下来，我们可以在表单提交时触发验证。antd提供了一个`validateFields`函数，用于校验表单所有项。我们可以在`LoginForm`组件中定义一个`handleSubmit`函数，在按钮点击时触发`validateFields`函数。例如：

const handleSubmit = (e) => {
  e.preventDefault();
  props.form.validateFields((errors, values) => {
    if (!errors) {
      console.log('表单验证通过', values);
    } else {
      console.log('表单验证失败', errors);
    }
  });
}

以上代码中，`handleSubmit`函数首先阻止了事件的默认行为，然后调用了`validateFields`函数进行表单验证。`validateFields`函数的第一个参数是回调函数，该回调函数会在验证成功或失败时被调用。如果验证成功，回调函数的第二个参数是表单所有项的值。

现在我们来看怎么在antd表单验证时获取其他表单值。在实际使用中，我们可能遇到一些特殊情况，需要获取其他表单项的值进行验证。

例如，我们想要验证密码和确认密码是否一致。此时，我们需要在验证确认密码时获取密码的值进行比较。我们可以通过在`getFieldDecorator`函数中传递`options`参数的方式来获取其他表单值。

以下是获取密码值的代码：

const checkPassword = (rule, value, callback) => {
  const { getFieldValue } = props.form;
  if (value && value !== getFieldValue('password')) {
    callback('确认密码与密码不一致');
  } else {
    callback();
  }
};

以上代码中，我们定义了一个名为`checkPassword`的函数，用于验证确认密码是否与密码相同。在该函数中，我们通过`getFieldValue`函数获取了密码字段的值，然后进行比较。如果不相同，就调用`callback`函数传递一个错误信息，否则调用`callback`函数传递一个空字符串。

接下来，在确认密码的`getFieldDecorator`函数中，我们传递了一个`options`参数，这个参数包含了一个`validator`函数，该函数会在确认密码发生变化时被调用。在`validator`函数中，我们调用`checkPassword`函数进行验证。以下是确认密码表单项的代码：

<Form.Item label="确认密码">
  {getFieldDecorator('confirmPassword', {
    initialValue: '',
    rules: [
      { required: true, message: '请输入确认密码' },
      { validator: checkPassword },
    ],
  })(<Input.Password />)}
</Form.Item>

至此，我们讲解了在antd表单验证时获取其他表单值的方法。在实际开发中，需要根据具体情况来进行实现。在验证过程中，我们可以通过`getFieldDecorator`函数的`options`参数来获取其他表单值。另外，我们也可以在表单提交前手动获取其他表单值进行验证。需要注意的是，在antd表单验证和表单项获取的过程中，我们都需要使用antd的高阶组件`Form.create()`将组件转换为antd表单组件。

### 回答3：
antd 是一款基于 React 的 UI 组件库，它提供了一些方便的表单组件和表单验证组件，可以帮助我们快速地开发出美观、易用、功能强大的表单页面。在antd中，我们可以通过 getFieldDecorator 方法来创建表单控件，并在其中设置一些验证规则，以保证用户输入的数据的合法性。但是，在实际开发过程中，我们常常需要获取其他表单控件的值，然后根据这些值来进行验证或者其他操作。那么，antd 验证时如何获取其他表单值呢？下面，我给大家介绍一些方法。

1. 表单嵌套

首先，我们可以在 Form 组件内部使用其他的表单组件，这样就可以通过事件来获取其他表单组件的值。例如：

<Form onSubmit={handleSubmit}>
  <FormItem label="用户名">
    {getFieldDecorator("username", {
      rules: [{ required: true, message: "请输入用户名" }],
    })(<Input />)}
  </FormItem>
  <FormItem label="密码">
    {getFieldDecorator("password", {
      rules: [{ required: true, message: "请输入密码" }],
    })(<Input type="password" />)}
  </FormItem>
  <FormItem>
    {getFieldDecorator("remember", {
      valuePropName: "checked",
      initialValue: true,
    })(<Checkbox>记住我</Checkbox>)}
  </FormItem>
  <FormItem>
    <Button type="primary" htmlType="submit">
      登录
    </Button>
  </FormItem>
</Form>

在 handleSubmit 函数中，我们可以通过 e.target.username.value 来获取用户名的值，e.target.password.value 来获取密码的值，这样就可以根据这些值来进行验证或者其他操作。

2. 自定义校验规则

其次，我们可以在 getFieldDecorator 的 rules 中自定义一些验证规则，然后在校验函数中通过 form.getFieldValue 方法来获取其他表单控件的值。例如：

const checkPassword = (rule, value, callback) => {
  const form = this.props.form;
  if (value && value !== form.getFieldValue("password")) {
    callback("两次输入的密码不一致，请重新输入！");
  } else {
    callback();
  }
};

<Form onSubmit={handleSubmit}>
  <FormItem label="密码">
    {getFieldDecorator("password", {
      rules: [{ required: true, message: "请输入密码" }],
    })(<Input type="password" />)}
  </FormItem>
  <FormItem label="确认密码">
    {getFieldDecorator("confirmPassword", {
      rules: [
        { required: true, message: "请再次输入密码" },
        { validator: checkPassword },
      ],
    })(<Input type="password" />)}
  </FormItem>
  <FormItem>
    <Button type="primary" htmlType="submit">
      注册
    </Button>
  </FormItem>
</Form>

在 checkPassword 函数中，我们通过 form.getFieldValue("password") 来获取密码控件的值，然后与当前控件的值进行比较，如果不一致则抛出错误信息，否则调用 callback 回调函数。

3. 使用 ref

最后，我们还可以通过 ref 来获取其他表单控件的值。例如：

<Form onSubmit={handleSubmit}>
  <FormItem label="用户名">
    {getFieldDecorator("username", {
      rules: [{ required: true, message: "请输入用户名" }],
    })(<Input ref={this.usernameRef} />)}
  </FormItem>
  <FormItem label="密码">
    {getFieldDecorator("password", {
      rules: [{ required: true, message: "请输入密码" }],
    })(<Input type="password" ref={this.passwordRef} />)}
  </FormItem>
  <FormItem>
    <Button type="primary" htmlType="submit">
      登录
    </Button>
  </FormItem>
</Form>

在 handleSubmit 函数中，我们可以通过 this.usernameRef.current.value 来获取用户名的值，this.passwordRef.current.value 来获取密码的值，这样就可以根据这些值来进行验证或者其他操作。

总之，antd 验证时获取其他表单值有很多种方法，以上只是其中的几种，具体应该根据实际情况选择最适合的方法。希望这篇文章能够帮助大家解决关于antd 验证时获取其他表单值的问题。