handleSubmit () { const { form: { validateFields } } = this this.confirmLoading = true validateFields((errors, values) => { if (!errors) { for (const key in values) { if (typeof (values[key]) === 'object' && values[key] != null) { values[key] = JSON.stringify(values[key]) } } simpleAdd(values).then((res) => { if (res.success) { this.$message.success('新增成功') this.confirmLoading = false this.$emit('ok', values) this.handleCancel() } else { this.$message.error('新增失败')// + res.message } }).finally((res) => { this.confirmLoading = false }) } else { this.confirmLoading = false } }) }

这段代码是一个表单提交的处理函数。首先，它通过 `validateFields` 方法来验证表单字段的合法性。如果没有错误，接着会遍历表单的值，将其中的对象类型转换为字符串类型。然后，调用 `simpleAdd` 函数来进行新增操作，并根据返回结果来显示成功或失败的消息。最后，无论成功与否，都会将 `confirmLoading` 设置为 false。如果有错误，也会将 `confirmLoading` 设置为 false。

相关问题

antdesign的validateFields如何使用

使用antdesign的validateFields函数需要先引入Form组件和createForm函数。然后在需要验证的表单上使用createForm函数创建一个表单实例，再把表单实例传递给validateFields函数进行验证。下面是一个简单的示例代码：

import { Form, Input, Button } from 'antd';
import { createForm } from 'rc-form';

const MyForm = (props) => {
  const { getFieldDecorator, validateFields } = props.form;

  const handleSubmit = (e) => {
    e.preventDefault();
    validateFields((errors, values) => {
      if (!errors) {
        console.log('表单数据：', values);
        // 提交表单数据到服务器
      } else {
        console.log('表单验证失败：', errors);
      }
    });
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Item label="用户名">
        {getFieldDecorator('username', {
          rules: [{ required: true, message: '请输入用户名' }],
        })(<Input placeholder="请输入用户名" />)}
      </Form.Item>
      <Form.Item label="密码">
        {getFieldDecorator('password', {
          rules: [{ required: true, message: '请输入密码' }],
        })(<Input.Password placeholder="请输入密码" />)}
      </Form.Item>
      <Button type="primary" htmlType="submit">
        提交
      </Button>
    </Form>
  );
};

export default createForm()(MyForm);

在上面的示例代码中，我们定义了一个名为MyForm的组件，并通过createForm函数创建了一个表单实例，然后在表单中使用getFieldDecorator函数定义了两个输入框，并设置了必填规则。在表单提交时，我们调用了validateFields函数进行表单验证，如果验证通过，则打印表单数据到控制台，否则打印验证失败信息。

validateFields校验单个 代码

假设你有一个表单，其中包含多个字段，你想对其中一个字段进行校验，可以使用 `validateFields` 方法来校验单个字段。以下是一个示例代码：

import { Form } from 'antd';

const MyForm = ({ form }) => {
  const { getFieldDecorator, validateFields } = form;

  const handleSubmit = (e) => {
    e.preventDefault();
    validateFields(['fieldName'], (errors, values) => {
      if (!errors) {
        console.log(values);
        // 在这里提交表单
      }
    });
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Item label="Field Name">
        {getFieldDecorator('fieldName', {
          rules: [{ required: true, message: 'Please input your field name!' }],
        })(<Input placeholder="Field Name" />)}
      </Form.Item>
      {/* 其他表单项 */}
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form>
  );
};

export default Form.create()(MyForm);

在上面的代码中，我们使用了 Ant Design 的 `Form` 组件和 `getFieldDecorator` 方法来渲染表单项。然后，在表单提交时，我们调用了 `validateFields` 方法来校验名为 `fieldName` 的表单项。如果校验通过，我们就可以在回调函数中获取表单值，并提交表单。如果校验失败，`errors` 参数将包含错误信息。