Next.js 密码重置函数在iPhone端Safari浏览器无法调用问题求助

可能原因及修复方案 #

事件绑定类（函数完全未触发的最高概率原因）

• 提交按钮未显式声明type="submit"：移动端Safari对<form>标签内未指定type属性的按钮，默认行为不会触发form的submit事件，和Chrome等浏览器的默认逻辑不同，直接给提交按钮加type="submit"即可修复。
• 用非交互元素模拟提交按钮：如果你的提交按钮是<div>、<span>等非<button>、<a>的元素，绑定了click事件触发提交，移动端Safari默认不会对这类无交互属性的元素触发click事件，修复方式是给对应元素加CSS样式cursor: pointer，或者显式给元素加onclick=""空属性。
• 原生表单验证拦截：如果你的邮箱输入框设置了type="email"，Safari会触发原生表单验证，验证不通过时会直接拦截submit事件，不会进入你自定义的提交函数，也不会有默认提示，修复方式是给<form>标签添加novalidate属性，关闭原生验证，使用你代码内的邮箱格式判断逻辑即可。
• 按钮disabled状态未正确更新：如果你的提交按钮设置了动态disabled属性，移动端Safari对布尔属性的变更响应存在偶发延迟，可能出现页面显示按钮已启用，但实际仍处于禁用状态的情况，可通过强制重绘或者调整disabled状态的更新时机修复。

代码逻辑兼容类（函数已触发但无响应的可能原因）

你提供的catch块存在边界问题：当请求出现跨域、网络中断等无返回响应的错误时，error.response会是undefined，直接访问error.response.data.message会抛出未捕获的异步异常，旧版iOS Safari对这类异步异常会静默不报错，看起来就像没有任何反应，修复方式是添加空判断，参考修改后的代码：

const onFormSubmit = async (e) => {
  e.preventDefault();

  if (!email || !email.includes('@') ) {
      setErrMessage('Die eingegebenen Daten sind fehlerhaft')
      return;
  }

  const data = {
    email: email
  }

  try{
    const res = await axios.post(`${baseurl}/api/auth/password-reset/`, data, {
      headers: {'Content-type':'application/json'}
    })

    setMessage(res.data.message)
    setErrMessage('')
  }catch(error){
    // 加可选链兼容无response的错误场景
    const e = error?.response?.data?.message || '请求出错，请稍后重试'
    setErrMessage(e)
    setMessage('')
    return
  }
};

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