使用HTML5的required屬性、輸入類型、pattern正則和驗(yàn)證API，可實(shí)現(xiàn)無需JavaScript的表單必填驗(yàn)證。1. 添加required屬性標(biāo)記必填字段；2. 使用email、url等輸入類型確保格式正確；3. 通過pattern配合正則校驗(yàn)自定義格式，如手機(jī)號；4. 利用checkValidity()和setCustomValidity()進(jìn)行腳本控制與自定義提示。

在HTML中實(shí)現(xiàn)表單必填項(xiàng)驗(yàn)證，可以通過HTML5內(nèi)置的驗(yàn)證API來完成，無需JavaScript就能讓瀏覽器自動提示用戶填寫必要信息。核心方法是使用表單元素的特定屬性，瀏覽器會根據(jù)這些屬性自動觸發(fā)校驗(yàn)邏輯。

1. 使用 required 屬性標(biāo)記必填項(xiàng)

最基礎(chǔ)也最常用的方式是在輸入框上添加 required 屬性，表示該字段不能為空。

<form>
??<label>姓名：</label>
??<input type="text" name="username" required>

??<label>郵箱：</label>
??<input type="email" name="email" required>

??<button type="submit">提交</button>
</form>

當(dāng)用戶點(diǎn)擊提交時，若這些字段為空，瀏覽器會彈出提示：“請?zhí)顚懘俗侄巍薄?/p>

2. 結(jié)合 input 類型提升驗(yàn)證精度

HTML5支持多種輸入類型，如 email、tel、url、number 等，每種類型自帶格式校驗(yàn)。配合 required 可實(shí)現(xiàn)“必填 + 格式正確”的雙重驗(yàn)證。

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

表單大師AI

一款基于自然語言處理技術(shù)的智能在線表單創(chuàng)建工具，可以幫助用戶快速、高效地生成各類專業(yè)表單。

74

查看詳情

• <input type="email" required> —— 必須填寫合法郵箱
• <input type="url" required> —— 必須填寫合法網(wǎng)址
• <input type="number" min="1" max="100" required> —— 必須填寫1到100之間的數(shù)字

3. 使用 pattern 屬性進(jìn)行自定義正則驗(yàn)證

對于需要特定格式的字段（如手機(jī)號、身份證號），可以使用 pattern 屬性定義正則表達(dá)式。

<input type="text" name="phone" required pattern="^1[3-9]\d{9}$" title="請輸入正確的手機(jī)號碼">

其中 title 的內(nèi)容會在校驗(yàn)失敗時顯示為提示信息。

4. 利用 HTML5 表單驗(yàn)證 API 進(jìn)行腳本控制

除了自動提示，你還可以通過 JavaScript 調(diào)用HTML5驗(yàn)證API，手動檢查表單狀態(tài)或觸發(fā)驗(yàn)證。

• checkValidity() —— 檢查元素是否通過驗(yàn)證，返回布爾值
• setCustomValidity() —— 設(shè)置自定義錯誤消息

<script>
??const passwordInput = document.querySelector('input[name="password"]');
??passwordInput.addEventListener('input', function() {
????if (this.value.length < 6) {
??????this.setCustomValidity('密碼至少6位');
????} else {
??????this.setCustomValidity(''); // 清除錯誤
????}
??});
</script>

基本上就這些。利用 required、input 類型、pattern 和 JS 驗(yàn)證API，你可以構(gòu)建出無需額外庫的可靠表單校驗(yàn)機(jī)制。雖然簡單，但覆蓋了大多數(shù)常見場景，適合快速開發(fā)和輕量級項(xiàng)目。

以上就是怎么用HTML插入表單必填項(xiàng)驗(yàn)證_HTML5驗(yàn)證API使用的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！