北京赛车 pk10开奖记录_Toyou热购彩票官网
建站資訊News

HTML5 表單驗證失敗的提示語問題

0
一佰互聯網站建設(www.yinxi.net) 發布時間肛告︰2019-04-20 08:56:18 瀏覽數: 70

前言

前端的童鞋在寫頁面時, 都不可避免的總會踩到 表單驗證 這個坑. 這時候, 我們就要跪了, 因為要寫一堆 js 來檢查. 但是自從 H5 出現後, 很多常見的 表達驗證 , 它都已經幫我們實現了, 讓我們減輕了很多負擔, 就好像下面的:

郵箱地址驗證: 

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Test</title></head><body>    <form action="">        <label >            郵箱: <input type="email">        </label>        <input type="submit">    </form></body></html>

郵箱驗證是 H5 自身支持的, 但是我們要驗證的場景和情況是多種多樣的, 那該怎麼辦? 用回 Js 嗎? 很明顯沒這麼蛋疼, 因為 H5 提供了 pattern 屬性, 讓我們自食其力! 我們可以在 pattern 指定正則表達式, 只要正則寫的好, 驗證就沒煩惱!

正則限定11位數字:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Test</title></head><body>    <form action="">        <label >            數字: <input type="text" pattern="^d{11}$">        </label>        <input type="submit">    </form></body></html>

問題

大家可以嘗試下, 在輸入非11位的數字, 都會報錯, 這就是 pattern 的功勞. 但是不知道大家發現了一個蛋疼的現象沒? 就是如果咱們使用 pattern 的方式去驗證表單, 在驗證失敗時, 它的提示都是 請與所請求的格式保持一致 , 我的天, 我們的用戶怎麼知道所請求的格式是什麼鬼, 總不能讓他們去看源碼吧, 要真這樣, 我們連頁面都不用寫了, 直接讓他們把錢給我們得了, 開個玩笑~

解決方案

有問題, 咱們就得解決, 在面向谷歌編程許久, 終于覓得一良方:

oninvalid石︰提交的input元素的值為無效值時(這里是正則驗證失敗)鷗螺,觸發

oninvalid事件姓奮羨。oninvalid屬于Form 事件劍。

setCustomValidity()倉煉紡︰這個是HTML5內置的JS方法劍插浦,用來自定義提示信息

原來可以通過 oninvalid 和 setCustomValidity 來自定義提示, 那這就好辦了, 修改源代碼如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Test</title></head><body>    <form action="">        <label >            數字: <input type="text" pattern="^d{11}$" oninvalid="setCustomValidity("請輸入11位數字")">        </label>        <input type="submit">    </form></body></html>

結果:

終于不是那個蛋疼的"格式"了, 現在表單驗證提示已經很明確的告訴我們, 這里應該輸入的是什麼樣的數據, 這樣用戶就能更好pk10开奖 "你的真名叫什麼?"“俺去甩1的修改自己的輸入了!

以上所述是小編給大家介紹的HTML5 表單驗證失敗的提示語問題蓖河,希望對大家有所幫助襄妹邯,如果大家有任何疑問請給我留言戊啤脖,小編會及時回復大家的勃吉。在此也非常感謝大家對網頁設計網站的支持!

一佰互聯是全國知名建站品牌服務商,我們有九年網站建設堆、網站制作氮案、網頁設計尼蔥、php開發和域名注冊及虛擬主機服務經驗慚款,提供的自助建站服務更是全國有名槽攣。近年來還整合團隊優勢自主開發了可視化多用戶”巔雲建站系統“3.0平台版莽充,拖拽排版網站制作設計價視孺,輕松實現pc站慣堅、手機微網站斧、小程序濤、APP一體化全網營銷網站建設 妨,已成功的為全國上百家網絡公司提供自助建站平台搭建服務磺。

上一篇湯︰h5實現獲取用戶地理定位的實例代碼
下一篇乾︰ HTML5地理定位_動力節點Java學院整理
[返回新聞列表]

相關新聞more

10
05月
為什麼你在做SEO網站優化不賺錢巔雲建站告送

北京網站建設公司巔雲建站舅︰賺錢逝岔,我想這個詞是大家腦海中出現次所最多的掠似,不管是男的還是女的;不管是老的還是少的;不管是經商還是做技術;很多人的... >>詳情

12
05月
專業網站建設一切基于美好生活的存在

我們生活節奏太快懊鉀。我們需要在這樣一個快節奏的情況中能好好的感受生活的魅力所在退權荒。太忙碌的生活需要健康合理的幫助給我們的生活帶來利益所在駒督紛。網絡網... >>詳情

17
05月
2017年卡片式設計網站優勢之建站流行趨勢分

window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":... >>詳情

30
04月
如何在symfony中導出為CSV文件中的數

開始困哎︰ 復制代碼 代碼如下: public function executeRegistrantsToCsv(){ $id = $this-... >>詳情

高端網站建設

美工兼顧SEO廣,為企業電子商務營銷助力!

電話筋︰

023-85725751
建站

產品

域名注冊 虛擬主機 雲服務器 企業郵局
智能建站 APP打包 微站/小程序 創業平台
網站推廣 媒體營銷 智能采集 AI機器人
400電話 短信營銷 店銷機器人
私人定制 門戶網站
北京赛车pk10 pk10