如何在Input Array中使用useState值实现密码确认匹配验证

因为静态的输入字段配置数组没法直接访问组件内的useState状态值，所以没法靠原生pattern属性实现密码匹配验证，推荐用以下几种思路解决：

方法1：输入变化/提交时手动校验 #

在Form组件里新增错误状态存确认密码的匹配问题，在确认密码输入变化或表单提交时，对比密码与确认密码的值，更新错误状态。

示例代码 #

Form组件：

import { useState } from 'react';
import FormInput from './FormInput';

// 原输入字段配置数组
const inputFields = [
  // 其他字段（如用户名、邮箱等）...
  {
    id: 5,
    name: 'password',
    type: 'password',
    label: '密码',
    required: true,
  },
  {
    id: 6,
    name: 'confirmPassword',
    type: 'password',
    label: '确认密码',
    required: true,
    // 移除无效的pattern配置
  },
];

const Form = () => {
  const [formValues, setFormValues] = useState({});
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    const updatedValues = { ...formValues, [name]: value };
    setFormValues(updatedValues);

    // 实时校验确认密码
    if (name === 'confirmPassword') {
      setErrors(prev => ({
        ...prev,
        confirmPassword: value !== formValues.password ? '两次输入的密码不匹配' : ''
      }));
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 提交前最终校验
    let submitErrors = {};
    if (formValues.password !== formValues.confirmPassword) {
      submitErrors.confirmPassword = '两次输入的密码不匹配';
    }
    if (Object.keys(submitErrors).length > 0) {
      setErrors(submitErrors);
      return;
    }
    // 校验通过，执行提交逻辑
    console.log('表单提交数据:', formValues);
  };

  return (
    <form onSubmit={handleSubmit}>
      {inputFields.map(field => (
        <FormInput
          key={field.id}
          {...field}
          value={formValues[field.name] || ''}
          onChange={handleChange}
          error={errors[field.name]}
        />
      ))}
      <button type="submit">注册</button>
    </form>
  );
};

export default Form;

FormInput组件（支持显示错误提示）：

const FormInput = ({ label, error, ...props }) => {
  return (
    <div className="form-item">
      <label>{label}</label>
      <input {...props} />
      {error && <span className="error-text">{error}</span>}
    </div>
  );
};

export default FormInput;

方法2：给配置数组添加自定义验证逻辑 #

在输入字段配置数组的confirmPassword项中添加自定义验证函数，在Form组件中调用该函数，传入当前表单值完成校验。

示例代码 #

更新输入字段配置数组：

const inputFields = [
  // 其他字段...
  {
    id: 5,
    name: 'password',
    type: 'password',
    label: '密码',
    required: true,
  },
  {
    id: 6,
    name: 'confirmPassword',
    type: 'password',
    label: '确认密码',
    required: true,
    // 添加自定义验证函数
    validate: (value, formValues) => {
      return value !== formValues.password ? '两次输入的密码不匹配' : null;
    },
  },
];

修改Form组件的handleChange逻辑：

const handleChange = (e) => {
  const { name, value } = e.target;
  const updatedValues = { ...formValues, [name]: value };
  setFormValues(updatedValues);

  // 执行当前字段的自定义验证
  const fieldConfig = inputFields.find(f => f.name === name);
  if (fieldConfig?.validate) {
    const error = fieldConfig.validate(value, updatedValues);
    setErrors(prev => ({ ...prev, [name]: error }));
  }
};

FormInput组件逻辑和方法1一致，无需额外修改。

方法3：监听密码变化同步校验 #

如果需要在密码修改时，自动重新校验已输入的确认密码，可以添加useEffect监听密码状态：

import { useState, useEffect } from 'react';

// ...其他代码不变

useEffect(() => {
  if (formValues.confirmPassword) {
    setErrors(prev => ({
      ...prev,
      confirmPassword: formValues.password !== formValues.confirmPassword ? '两次输入的密码不匹配' : ''
    }));
  }
}, [formValues.password]);

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