成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

H5: 表單驗(yàn)證失敗的提示語(yǔ)

callmewhy / 2670人閱讀

摘要：前言前端的童鞋在寫(xiě)頁(yè)面時(shí)都不可避免的總會(huì)踩到表單驗(yàn)證這個(gè)坑這時(shí)候我們就要跪了因?yàn)橐獙?xiě)一堆來(lái)檢查但是自從出現(xiàn)后很多常見(jiàn)的表達(dá)驗(yàn)證它都已經(jīng)幫我們實(shí)現(xiàn)了讓我們減輕了很多負(fù)擔(dān)就好像下面的郵箱地址驗(yàn)證郵箱郵箱驗(yàn)證是自身支持的但是我們要驗(yàn)證的場(chǎng)景和情

前言

????前端的童鞋在寫(xiě)頁(yè)面時(shí), 都不可避免的總會(huì)踩到表單驗(yàn)證這個(gè)坑. 這時(shí)候, 我們就要跪了, 因?yàn)橐獙?xiě)一堆js來(lái)檢查. 但是自從H5出現(xiàn)后, 很多常見(jiàn)的表達(dá)驗(yàn)證, 它都已經(jīng)幫我們實(shí)現(xiàn)了, 讓我們減輕了很多負(fù)擔(dān), 就好像下面的:

郵箱地址驗(yàn)證:




    
    Test

????郵箱驗(yàn)證是H5自身支持的, 但是我們要驗(yàn)證的場(chǎng)景和情況是多種多樣的, 那該怎么辦? 用回Js嗎? 很明顯沒(méi)這么蛋疼, 因?yàn)?b>H5提供了pattern屬性, 讓我們自食其力! 我們可以在pattern指定正則表達(dá)式, 只要正則寫(xiě)的好, 驗(yàn)證就沒(méi)煩惱!

正則限定11位數(shù)字:




    
    Test

問(wèn)題

????大家可以嘗試下, 在輸入非11位的數(shù)字, 都會(huì)報(bào)錯(cuò), 這就是pattern的功勞. 但是不知道大家發(fā)現(xiàn)了一個(gè)蛋疼的現(xiàn)象沒(méi)? 就是如果咱們使用pattern的方式去驗(yàn)證表單, 在驗(yàn)證失敗時(shí), 它的提示都是請(qǐng)與所請(qǐng)求的格式保持一致, 我的天, 我們的用戶怎么知道所請(qǐng)求的格式是什么鬼, 總不能讓他們?nèi)タ丛创a吧, 要真這樣, 我們連頁(yè)面都不用寫(xiě)了, 直接讓他們把錢給我們得了, 開(kāi)個(gè)玩笑~

解決方案

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

oninvalid：提交的input元素的值為無(wú)效值時(shí)（這里是正則驗(yàn)證失?。|發(fā)
oninvalid事件。oninvalid屬于Form 事件。

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

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




    
    Test

結(jié)果:

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

歡迎各位大神指點(diǎn)交流,轉(zhuǎn)載請(qǐng)注明來(lái)源: https://segmentfault.com/a/11...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87117.html

相關(guān)文章

  • 2017-07-14 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選技術(shù)周刊譯文四種使用提升應(yīng)用的方式當(dāng)我們談?wù)撉岸思軜?gòu)時(shí)，我們到底在談?wù)撌裁词堑?，?lái)了與之爭(zhēng)發(fā)布中文譯是的，來(lái)了掘金第期實(shí)踐總結(jié)個(gè)必備的裝逼技巧掘金年學(xué)習(xí)最好的書(shū)籍圓形隨機(jī)分布種事件驅(qū)動(dòng)的架構(gòu)試用知識(shí)總結(jié)個(gè)人文章 2017-07-14 前端日?qǐng)?bào) 精選 SegmentFault 技術(shù)周刊【譯文】四種使用webpack提升Vue應(yīng)用的方式當(dāng)我們談?wù)撉岸思軜?gòu)時(shí)，我們到底在談?wù)撌裁矗?..

    lewinlee 評(píng)論0 收藏0

  • 前端框架快速開(kāi)發(fā)靜態(tài)頁(yè)面

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

    李世贊 評(píng)論0 收藏0

  • 前端框架快速開(kāi)發(fā)靜態(tài)頁(yè)面

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

    wenzi 評(píng)論0 收藏0

  • 前端框架快速開(kāi)發(fā)靜態(tài)頁(yè)面

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

    mozillazg 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<