如何禁用input type email的浏览器默认验证？（redux-form场景）

当然可以解决这个问题！浏览器对type="email"的输入框自带的格式验证确实会和redux-form这类自定义表单验证库产生冲突，导致用户看到双重提示或者混淆的错误信息，下面给你两种实用的解决方法：

方法一：给表单添加novalidate属性 #

这是最彻底的方式，直接禁用整个表单的所有浏览器默认验证逻辑，完全交给redux-form处理。你只需要在包裹表单的<form>标签上加上这个属性就行——如果是用redux-form的Form组件，也可以通过props传递这个属性：

// 普通form标签写法
<form novalidate>
  {/* 你的redux-form Field组件们 */}
</form>

// redux-form的Form组件写法
<Form novalidate onSubmit={handleSubmit}>
  <Field name="email" component="input" type="email" />
  {/* 其他字段 */}
</Form>

方法二：给单个email输入框添加formnovalidate属性 #

如果你只想禁用这一个email输入框的默认验证，而保留表单里其他字段的浏览器默认验证（比如必填项的提示），可以给对应的input元素加上这个属性。在redux-form里，直接把这个属性传给Field组件即可：

<Field 
  name="email" 
  component="input" 
  type="email" 
  formnovalidate 
/>

小提醒 #

禁用浏览器默认验证后，记得确保你的redux-form验证规则里已经包含了email格式的检查（比如用正则表达式或者专门的验证函数），这样不会漏掉必要的格式校验，保证表单数据的正确性。

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