React Formik中如何排除确认密码字段提交其余表单数据？

嘿，刚接触React和Formik对吧？别担心，要在提交时排除verifyPassword字段其实挺简单的，我给你分享几种实用的方法：

方法1：解构赋值快速排除字段 #

这是最简洁的方式，利用ES6的解构赋值和剩余操作符，直接把不需要的字段从Formik的values里剥离出来：

import axios from 'axios';
import { Formik, Form, Field } from 'formik';

const YourForm = () => {
  const handleSubmit = async (values, { setSubmitting }) => {
    // 解构出verifyPassword，剩下的所有字段存入submitData
    const { verifyPassword, ...submitData } = values;

    try {
      // 仅提交排除确认密码后的数据集
      await axios.post('/api/your-submit-endpoint', submitData);
      console.log('表单提交成功！');
      // 这里可以添加提交成功后的逻辑，比如弹窗提示、重置表单等
    } catch (error) {
      console.error('提交失败，请检查:', error);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Formik
      initialValues={{
        username: '',
        password: '',
        verifyPassword: '',
        // 其他业务相关字段，比如email、phone等
      }}
      validationSchema={/* 这里放你的表单验证规则，比如Yup schema */}
      onSubmit={handleSubmit}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field name="username" type="text" placeholder="用户名" />
          <Field name="password" type="password" placeholder="密码" />
          <Field name="verifyPassword" type="password" placeholder="确认密码" />
          {/* 其他业务字段的输入组件 */}
          <button type="submit" disabled={isSubmitting}>提交</button>
        </Form>
      )}
    </Formik>
  );
};

export default YourForm;

方法2：手动构建提交对象 #

如果你的表单字段不多，也可以手动挑选需要提交的字段，明确排除verifyPassword：

const handleSubmit = async (values, { setSubmitting }) => {
  // 只把需要的字段放进submitData里
  const submitData = {
    username: values.username,
    password: values.password,
    email: values.email,
    phone: values.phone,
    // 其他业务字段...
    // 故意不包含verifyPassword
  };

  try {
    await axios.post('/api/your-submit-endpoint', submitData);
    console.log('提交成功！');
  } catch (error) {
    console.error('提交失败:', error);
  } finally {
    setSubmitting(false);
  }
};

额外提醒：确认密码的验证不能丢 #

虽然我们不提交verifyPassword，但前端的验证还是要做的，比如确保两次密码一致。举个用Yup做验证的例子：

import * as Yup from 'yup';

const validationSchema = Yup.object({
  username: Yup.string().required('用户名不能为空'),
  password: Yup.string().min(6, '密码至少6位').required('密码不能为空'),
  verifyPassword: Yup.string()
    .oneOf([Yup.ref('password'), null], '两次输入的密码不一致')
    .required('请确认密码'),
  // 其他字段的验证规则...
});

这样用户在提交前会被要求输入正确的确认密码，但最终提交给后端的数据里不会包含这个字段，完全符合你的需求～

内容的提问来源于stack exchange，提问作者sk24