国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

H5: 表單驗證失敗的提示語

callmewhy / 2646人閱讀

摘要：前言前端的童鞋在寫頁面時都不可避免的總會踩到表單驗證這個坑這時候我們就要跪了因為要寫一堆來檢查但是自從出現后很多常見的表達驗證它都已經幫我們實現了讓我們減輕了很多負擔就好像下面的郵箱地址驗證郵箱郵箱驗證是自身支持的但是我們要驗證的場景和情

前言

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

郵箱地址驗證:




    
    Test

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

正則限定11位數字:




    
    Test

問題

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

解決方案

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

oninvalid：提交的input元素的值為無效值時（這里是正則驗證失敗），觸發
oninvalid事件。oninvalid屬于Form 事件。

setCustomValidity()：這個是HTML5內置的JS方法，用來自定義提示信息

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




    
    Test

結果:

????終于不是那個蛋疼的"格式"了, 現在表單驗證提示已經很明確的告訴我們, 這里應該輸入的是什么樣的數據, 這樣用戶就能更好的修改自己的輸入了!

歡迎各位大神指點交流,轉載請注明來源: https://segmentfault.com/a/11...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87117.html

相關文章

  • 2017-07-14 前端日報

    摘要：前端日報精選技術周刊譯文四種使用提升應用的方式當我們談論前端架構時，我們到底在談論什么是的，來了與之爭發布中文譯是的，來了掘金第期實踐總結個必備的裝逼技巧掘金年學習最好的書籍圓形隨機分布種事件驅動的架構試用知識總結個人文章 2017-07-14 前端日報 精選 SegmentFault 技術周刊【譯文】四種使用webpack提升Vue應用的方式當我們談論前端架構時，我們到底在談論什么？...

    lewinlee 評論0 收藏0

  • 前端框架快速開發靜態頁面

    摘要：框架開發解放了生產力，讓一個靜態頁面效果更逼真，也讓用戶體驗逐漸上去，但是目前對網站的需求主要還是為了展示和宣傳一些東西，反觀教育機構和政府部門的網站都是偏動畫少，體現了公關的嚴肅性。 showImg(https://segmentfault.com/img/remote/1460000009262879?w=1183&h=522); 前言 最近很久沒有寫文章，不忙也忙的生活節奏，博客...

    李世贊 評論0 收藏0

  • 前端框架快速開發靜態頁面

    摘要：框架開發解放了生產力，讓一個靜態頁面效果更逼真，也讓用戶體驗逐漸上去，但是目前對網站的需求主要還是為了展示和宣傳一些東西，反觀教育機構和政府部門的網站都是偏動畫少，體現了公關的嚴肅性。 showImg(https://segmentfault.com/img/remote/1460000009262879?w=1183&h=522); 前言 最近很久沒有寫文章，不忙也忙的生活節奏，博客...

    wenzi 評論0 收藏0

  • 前端框架快速開發靜態頁面

    摘要：框架開發解放了生產力，讓一個靜態頁面效果更逼真，也讓用戶體驗逐漸上去，但是目前對網站的需求主要還是為了展示和宣傳一些東西，反觀教育機構和政府部門的網站都是偏動畫少，體現了公關的嚴肅性。 showImg(https://segmentfault.com/img/remote/1460000009262879?w=1183&h=522); 前言 最近很久沒有寫文章，不忙也忙的生活節奏，博客...

    mozillazg 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<