### 回答1：
在使用 antd 进行表单验证时，如果需要获取其他表单项的值进行逻辑判断，则可以通过自定义校验函数来实现。比如，我们需要判断输入的密码和确认密码是否一致，就需要获取确认密码的值来进行比较。
首先，在需要运用验证的表单组件中，需要引入 antd 的 Form 组件，并使用 getFieldDecorator 方法进行包装。在 getFieldDecorator 方法中，可以传入自定义的校验函数 validator，函数中的参数 rule 和 value 分别代表当前被验证的表单项和其对应的值。我们可以通过 Form 对象的 getFieldValue 方法来获取其他表单项的值，然后在校验函数中进行比较。
例如：
```jsx
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 组件内部使用其他的表单组件，这样就可以通过事件来获取其他表单组件的值。例如：
```jsx
<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 方法来获取其他表单控件的值。例如：
```jsx
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 来获取其他表单控件的值。例如：
```jsx
<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 验证时获取其他表单值的问题。
本文介绍了在AntD中如何为Form表单创建自定义验证规则，包括禁止输入特定值和限制只能输入特定值的场景。并提供了升级到4.x版本后的新验证方法，参考了Ant Design Form表单的官方文档。
最低0.47元/天 解锁文章
扫一扫
1271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
