React 表单复杂联动验证怎么做？

Question

React 表单复杂联动验证怎么做？

仓乃文 · Accepted Answer

表单字段之间有联动关系（如选择省份后联动城市、密码确认需一致）时，用 useReducer 集中管理表单状态和验证逻辑，比多个 useState 更清晰可控。

useReducer 管理联动表单：
```javascript
const initialState = {
  province: "", city: "", cities: [],
  password: "", confirmPassword: "", errors: {},
};

function Form() {
  const [state, dispatch] = useReducer(formReducer, initialState);
  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch({ type: "VALIDATE" });
  };
}
```

补充说明：
- useReducer 把所有联动逻辑集中在一个 reducer 中，比散落的 useState + useEffect 更易维护
- 复杂表单推荐 react-hook-form + zod，内置验证、联动、性能优化
- 实时验证用 onChange 触发 VALIDATE，提交验证用 onSubmit 触发
- 密码确认等跨字段验证不适合放在单个字段的验证规则中，应在 reducer 中统一处理