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