- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) > web開(kāi)發(fā) >
- HTML5中怎么實(shí)現表單驗證
這篇文章將為大家詳細講解有關(guān)HTML5中怎么實(shí)現表單驗證，文章內容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
<!DOCTYPE html>
<form>
<input id="text" pattern="^1[3-9]\d{9}$" required />
<input id="button" type="submit" />
</form>
注意只有非空的表單才會(huì )使用正則驗證，如果什么都不輸入的話(huà)，pattern不會(huì )被使用，所以還需要required協(xié)助。但是這個(gè)代碼彈出的提示是這樣的：
這樣的提示文字只有猴子看得懂！所以我們還需要更友好的提示文字，使用setCustomValidity方法來(lái)定義。
運行
XML/HTML Code復制內容到剪貼板
<!DOCTYPE html>
<form>
<input id="text" pattern="^1[3-9]\d{9}$" required />
<input id="button" type="submit" />
</form>
<script>
text.oninput=function(){
text.setCustomValidity("");
};
text.oninvalid=function(){
text.setCustomValidity("請不要輸入火星的手機號好嗎？");
};
</script>
invalid事件會(huì )在表單submit事件之前觸發(fā)，如果驗證不通過(guò)的話(huà)就不會(huì )觸發(fā)表單的submit。而提交時(shí)會(huì )先驗證所有表單元素是值是否有效。除了提交外還可以手動(dòng)調用checkValidity方法來(lái)執行驗證。
上面的例子中我直接對控件設置固定的提示其實(shí)不太好，有時(shí)候可能需要更詳細的提示信息，比如空的時(shí)候提示為空、太長(cháng)的時(shí)候提示太長(cháng)、非數字的時(shí)候提示非數字等。這些動(dòng)作可以通過(guò)程序驗證后動(dòng)態(tài)地setCustomValidity來(lái)實(shí)現。
其實(shí)我覺(jué)得HTML5的這套API設計的很糟糕，雖然可以滿(mǎn)足基本需求，但還真不太實(shí)用。
手機頁(yè)面中表單提交用JavaScript驗證信息 會(huì )彈出窗口，用戶(hù)體驗極差，所以再給出一個(gè)手機端用HTML5的屬性來(lái)驗證的示例：
XML/HTML Code復制內容到剪貼板
<input id="name" name="name" placeholder="name" required="" tabindex="1" type="text">
<input id="email" name="email" placeholder="telephone" required="" tabindex="2" type="text" pattern="(^(\d{3,4}-)?\d{7,8})$|^(13|15|18|14)\d{9}$">
<input id="subject" name="subject" placeholder="example@domain.com" required="" tabindex="2" type="text">
// 主要用了HTML的一下屬性
// 1.placeholder 提供可描述輸入字段預期值的提示信息。 該提示會(huì )在輸入字段為空時(shí)顯示,并會(huì )在字段獲
//得焦點(diǎn)時(shí)消失
//2.required 屬性規定必需在提交之前填寫(xiě)輸入字段
//3.pattern 是正則表達式, 里面可以直接填寫(xiě)正則表達式
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自互聯(lián)網(wǎng)轉載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權請聯(lián)系站長(cháng)郵箱：ts@56dr.com進(jìn)行舉報，并提供相關(guān)證據，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容。
Copyright ? 2009-2021 56dr.com. All Rights Reserved. 特網(wǎng)科技 版權所有 珠海市特網(wǎng)科技有限公司 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2 建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
