利用 HTML5 Constraint Validation API 驗證 React App 表單

Amdis Liu
Amdis Liu
May 5 · 11 min read

前言

const handleSubmit = e => {
e.preventDefault();
if (validate()) {
console.log('form submitted');
}
};

const validate = () => {
const form = formRef.current;

return form.reportValidity();
};
<form onSubmit={handleSubmit} ref={formRef}>
<input type="password" minLength="8" value={password} onChange={handleChange} />
<button type="submit"> Submit </button>
</form>
從左至右為 Chrome / Firefox / Safari 的原生訊息

Constraint Validation API

Property

ValidityState object 屬性列表

Method

上圖取自 html5rocks 文章 (https://www.html5rocks.com/en/tutorials/forms/constraintvalidation/)

支援的 Elements

瀏覽器支援度

實際程式範例

範例:使用 validation API 驗證表單 children control 輸入合法性
Gist code 實際執行結果 on Chrome
From html5rocks from constraint validation (https://www.html5rocks.com/en/tutorials/forms/constraintvalidation/)

總結

感謝你讀完這篇文章,如果喜歡我的文章,用力按下旁邊的「拍手」鈕給我些鼓勵吧。鼓勵這種東西,1下不嫌少,50下不嫌多,
讓我明白花時間寫出來的文章是否有幫助到你。
也歡迎在下面留言,有任何建議和指正,請務必讓我知道。

Frochu

Frochu — Frontend Ochu ,程式碼的黑手,親手實作的前端知識推動者

Amdis Liu

Written by

Amdis Liu

Web frontend / mobile developer. Editor of publication Frochu: https://medium.com/frochu .

Frochu

Frochu

Frochu — Frontend Ochu ,程式碼的黑手,親手實作的前端知識推動者