react arcodesignform表单校验 需要捕捉到 后端报错信息 并且有正则校验 写一个示例

在React中，结合Arcodesignform库进行表单验证，并捕获后端返回的错误信息以及使用正则表达式进行字段校验，可以采用如下的步骤：

首先，安装必要的依赖：

npm install @arcodesignform/react @arcodesignform/core axios // 如果还没安装axios用于网络请求

然后，在组件中导入并配置弧形设计表单、axios和正则表达式库：

import React from 'react';
import { Form, Field, Errors } from '@arcodesignform/react';
import axios from 'axios';
import { isEmail as emailRegex } from 'validator'; // 导入正则验证函数

const FormValidation = () => {
  const [formData, setFormData] = useState({ email: '', password: '' });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const validateForm = async (values) => {
    try {
      setIsSubmitting(true);
      const response = await axios.post('/api/validate', values); // 假设后端API地址
      if (response.data.errors) {
        setErrors(response.data.errors);
      } else {
        // 如果无误，你可以在这里做成功处理，例如提交数据等
        console.log('Form validated successfully');
      }
    } catch (error) {
      // 捕获网络错误或其他异常
      console.error('Error validating form:', error.response.data);
      setErrors({ ...errors, ...{ generalError: 'Server error occurred' } });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div>
      <Form onSubmit={validateForm}>
        <Field name="email" validate={[emailRegex, 'Please enter a valid email address']}>
          {({ input, errors }) => (
            <input type="email" {...input} placeholder="Email" error={!!errors.email} />
            <Errors key="email">{errors.email}</Errors>
          )}
        </Field>
        <Field name="password" validate={['minLength:6', 'Password must be at least 6 characters long']}>
          {({ input, errors }) => (
            <input type="password" {...input} placeholder="Password" error={!!errors.password} />
            <Errors key="password">{errors.password}</Errors>
          )}
        </Field>

        <button type="submit" disabled={isSubmitting || Object.keys(errors).length > 0}>
          Submit
        </button>
      </Form>
      <pre>{JSON.stringify(errors, null, 2)}</pre> {/* 可视化当前错误信息 */}
    </div>
  );
};

export default FormValidation;

在这个例子中，我们定义了一个`FormValidation`组件，其中包含两个表单字段（email和password），每个字段都有正则表达式的验证。当用户提交表单时，我们会发送POST请求到后端API进行验证。如果后端返回错误信息，我们将它们添加到`errors`状态变量中，并显示在表单旁边。同时，我们也展示了如何捕获网络请求错误。