詳解微信小程序input標(biāo)簽正則初體驗(yàn)
開(kāi)篇廢話
在開(kāi)發(fā)過(guò)程中經(jīng)常遇到這樣的需求：用戶只能輸入數(shù)字并且只保留小數(shù)點(diǎn)兩位。雖然我們可以在提交表單的時(shí)候進(jìn)行驗(yàn)證，但是體驗(yàn)不是很好。下面我主要使用了小程序input標(biāo)簽的bindinput方法對(duì)輸入的值進(jìn)行監(jiān)聽(tīng)，然后進(jìn)行正則匹配。
1. input標(biāo)簽
微信小程序input標(biāo)簽自帶type=digit屬性，可以調(diào)起帶有小數(shù)點(diǎn)的數(shù)字鍵盤(pán)，maxlength屬性可以控制我們輸入字符的個(gè)數(shù)，然后我們給input標(biāo)簽綁定bindinput方法。
<input type="digit" bindinput="regInput" maxlength="15"/>
2. 綁定監(jiān)聽(tīng)事件
bindinput方法可以監(jiān)聽(tīng)到當(dāng)前輸入框的值，類似于onchange事件，但不太一樣。通過(guò)e.detail.value可以獲取到input的值，return返回的字符串可以替換掉輸入的字符串。
3. 正則匹配
匹配正則通過(guò)則返回所有字符，不通過(guò)則去掉最后一個(gè)不匹配的字符返回。
/*正則匹配*/
regInput(e){
if(/^(\d?)+(\.\d{0,2})?$/.test(e.detail.value)){
return e.detail.value;
}else {
return e.detail.value.substring(0,e.detail.value.length-1);
}
}
結(jié)束
這個(gè)正則表達(dá)式不是很完美，歡迎一起來(lái)優(yōu)化。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
axios實(shí)現(xiàn)簡(jiǎn)單文件上傳功能
這篇文章主要為大家詳細(xì)介紹了axios實(shí)現(xiàn)簡(jiǎn)單文件上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
JS實(shí)現(xiàn)點(diǎn)擊按鈕獲取頁(yè)面高度的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊按鈕獲取頁(yè)面高度的方法,涉及JavaScript針對(duì)頁(yè)面元素高度的各種常見(jiàn)運(yùn)算,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
本文匯總了Javascript中兩個(gè)對(duì)象的比較、不同類型的比較以及對(duì)象跟原始值的比較，并進(jìn)行了實(shí)例演示，希望能幫助到有需要的朋友們。2016-07-07
本篇文章給大家分享了關(guān)于JavaScript中操作符和表達(dá)式的相關(guān)知識(shí)點(diǎn)內(nèi)容，有興趣的朋友們參考下吧。2018-09-09
5秒后跳轉(zhuǎn)到另一個(gè)頁(yè)面的js代碼
跳轉(zhuǎn)到另一個(gè)頁(yè)面的方法有很多，在本文將為大家詳細(xì)介紹下js中如何實(shí)現(xiàn)5秒后跳轉(zhuǎn)到另一個(gè)頁(yè)面，感興趣的朋友可不要錯(cuò)過(guò)2013-10-10
JS實(shí)現(xiàn)簡(jiǎn)單路由器功能的方法
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單路由器功能的方法,基于javascript模擬簡(jiǎn)單路由編碼的相關(guān)技巧,需要的朋友可以參考下2015-05-05
子窗口、父窗口和Silverlight之間的相互調(diào)用
前兩天做 silverlight 的東西，主頁(yè)面打開(kāi)一個(gè)子頁(yè)面，然后子頁(yè)面中包含一個(gè) silverlight 應(yīng)用程序那難免會(huì)涉及到他們?nèi)呦嗷フ{(diào)用的問(wèn)題2010-08-08
typescript中type和interface的區(qū)別有哪些
大家使用typescript總會(huì)使用到interface和type,所以下面這篇文章主要給大家介紹了關(guān)于typescript中type和interface區(qū)別的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-02-02
最丑的時(shí)鐘效果！js canvas時(shí)鐘制作方法
最丑的時(shí)鐘效果，這篇文章主要為大家詳細(xì)介紹了js canvas時(shí)鐘制作方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
indexOf()?方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置，這篇文章主要介紹了js?indexOf?的正確用法,需要的朋友可以參考下2023-02-02