反應如何在輸入模糊時觸發表單提交？

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)
})