Question

我正在尝试利用HTML5 <input type="email" />验证检查。

我可以使它正常工作：

<form>
  <input type="email" />
  <input type="submit" />
</form>

这可以使验证通过单击sumbit按钮起作用。但是，我想在email字段模糊时触发表单提交。

如何在没有提交按钮onBlur的情况下触发表单？

赞：

<form>
  <input type="email" onBlur={/* trigger form submission */} />
</form>

或者，有没有更好的方法可以在输入模糊时执行HTML5电子邮件验证检查？

Answer 1

在表单上放置一个ref属性，然后调用Submit函数：

<form ref="myForm">
  <input type="email" onBlur={this.submitForm.bind(this)} />
</form>

添加功能：

submitForm(){
  this.refs['myForm'].submit()
}

Answer 2

使用原生checkValidity方法

<form>
  <input type="email" id="a" />
</form>

const a = document.querySelector('#a')


a.addEventListener('blur', e => {
const isValid =  e.target.checkValidity()
console.log(isValid)
})

反应如何在输入模糊时触发表单提交？

2 个答案: