[WebAPIs] 表單驗證與取值 form validation and value
keywords: input, form
HTML Element @ MDN HTML Input element @ MDN
概念
- 一般來說 client-side 的表單驗證因為使用者能夠得到立即的回饋，所以較為 user-friendly。在 client-side 的表單驗證中，又可以分成用 HTML 內建的表單驗證或用 JS 製作表單驗證，前者效能較好，後者較能進行客制化的驗證。
- server-side 的表單驗證雖然對使用者來說較不友善，但卻是必要的，因為前端的東西容易遭到使用者竄改。
- 因此，最常見的是同時使用 client-side 和 server-side 表單驗證。
- 當表單送出驗證有效時，會在表單欄位增加
:valid的偽元素；若無效則會新增:invalid的偽元素。
HTML 元素
Input Text
keywords: required, pattern, minlength, maxlength
<!-- specify "minlength" and "maxlength" -->
<input
type="text"
id="username"
name="name"
size="10"
placeholder="Username"
required
minlength="4"
maxlength="8"
/>
<!-- specify a "pattern" -->
<input type="text" id="username" name="name" size="45" required pattern="[a-z]{4,8}" />
<textarea>一樣有提供maxlength但是不提供pattern。
Input Number
keywords: required, min, max, step
<input type="number" id="number" name="amount" value="1" min="1" max="10" step="0.1" />
Input Number 並不支援使用
pattern@ MDN
表單取值
一般表單中的 <input /> 都可以直接透過 value 取得該內容，除了一些特殊的 radio 或 file 的類型不是直接透過 value 取得：
/* text, textarea, range, select 都可以透過 value 取值，但 multiple select 不行 */
const inputElements = document.querySelectorAll(
'input[type="text"], input[type="range"], select, textarea',
);
[...inputElements].forEach((input) => console.log(`${input.type}: ${input.value}`));
/* file */
const fileInput = document.querySelector('input[type="file"]');
fileInput.type; // 'file'
fileInput.value; // 'C:\fakepath\IMG_20190526_172551.jpg'
fileInput.files; // FileList Object
/* radio, checkbox */
const checkInput = document.querySelector('input[type="radio"], input[type="checkbox"]');
checkInput.checked; // true or false
客制化表單驗證訊息
然而，透過 HTML 自動產生的表單驗證訊息有些特性：
- 沒有 HTML 原生方法可以直接修改樣式。
- 另外，不同的瀏覽器和不同的地區看到的也會是不同的訊息內容。
因此若想客制化表單樣式和訊息得搭配使用 JS。
如果只是想要做到客制化錯誤訊息，可以使用 setCustomValidity 參考下述的作法：
var email = document.getElementById('mail');
email.addEventListener('input', function (event) {
if (email.validity.typeMismatch) {
email.setCustomValidity('I expect an e-mail, darling!');
} else {
email.setCustomValidity('');
}
});
如果想要做到更多客制化的功能，可以參考 HTML5 constraint validation API ，在使用 JavaScript 客制化表單樣式時，需要為表單添加 novalidate 屬性來關掉瀏覽器預設的驗證行為，但這麼做並不會關閉調可以用的表單驗證 API，也不會影響到 CSS 偽類 :valid, :invalid, :in-range, out-of-range，因此我們還是可以使用這些樣式：
<!-- HTML -->
<form novalidate>
<p>
<label for="mail">
<span>Please enter an email address:</span>
<input type="email" id="mail" name="mail" />
<span class="error" aria-live="polite"></span>
</label>
</p>
<button>Submit</button>
</form>
JS 部分則可以使用 inputElement.validity.valid 來驗證使用者輸入資料的有效性，當內容無效時，可以為 .error 添加 .active 來促發錯誤訊息：
var form = document.getElementsByTagName('form')[0];
var email = document.getElementById('mail');
var error = document.querySelector('.error');
email.addEventListener(
'input',
function (event) {
if (email.validity.valid) {
error.innerHTML = ''; // Reset the content of the message
error.className = 'error'; // Reset the visual state of the message
}
},
false,
);
form.addEventListener(
'submit',
function (event) {
if (!email.validity.valid) {
error.innerHTML = 'I expect an e-mail, darling!';
error.className = 'error active';
event.preventDefault();
}
},
false,
);