詳解微信小程序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í)有所幫助，也希望大家多多支持腳本之家。
- 解決uni-app微信小程序input輸入框在底部時(shí),鍵盤(pán)彈起頁(yè)面整體上移問(wèn)題
- 一文解決微信小程序button、input和image表單組件
- 微信小程序input、textarea層級(jí)過(guò)高穿透的問(wèn)題解決
- 微信小程序點(diǎn)擊按鈕動(dòng)態(tài)切換input的disabled禁用/啟用狀態(tài)功能
- 微信小程序事件 bindtap bindinput代碼實(shí)例
- 微信小程序?qū)崿F(xiàn)提交input信息到后臺(tái)的方法示例
- 微信小程序input框中加入小圖標(biāo)的實(shí)現(xiàn)方法
- 微信小程序使用input組件實(shí)現(xiàn)密碼框功能【附源碼下載】
- 微信小程序 input輸入及動(dòng)態(tài)設(shè)置按鈕的實(shí)現(xiàn)
- 微信小程序中input標(biāo)簽詳解及簡(jiǎn)單實(shí)例
- 微信小程序中input組件為什么設(shè)置readonly只讀屬性沒(méi)有作用（失效）?
相關(guān)文章
基于javascript實(shí)現(xiàn)的快速排序
本篇文章主要介紹了javascript實(shí)現(xiàn)的快速排序的方法與原理說(shuō)明：找基準(zhǔn)點(diǎn)、建立二個(gè)數(shù)組分別存儲(chǔ)、遞歸。需要的朋友來(lái)看下吧2016-12-12
這篇文章主要介紹了關(guān)于前端文件下載各類方式大匯總，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-08-08
以JSON形式將JS中Array對(duì)象數(shù)組傳至后臺(tái)的方法
業(yè)務(wù)是需要將前臺(tái)jQuery easyUI DataGrid列表中所選的若干行的數(shù)據(jù)傳到后臺(tái)進(jìn)行update操作，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下2014-01-01
js實(shí)現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的三種方式
Blob對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類文件對(duì)象,Blob表示的不一定是JavaScript原生格式的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的三種方式,需要的朋友可以參考下2023-04-04
本文主要分享了canvas紅包照片的實(shí)例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
label標(biāo)簽在JS和Jquery中使用不能像其他標(biāo)簽一樣用value獲取它的值，下面有個(gè)不錯(cuò)的示例，希望大家可以學(xué)習(xí)下2014-01-01
這篇文章主要介紹了JS查找孩子節(jié)點(diǎn),結(jié)合完整實(shí)例形式分析了javascript節(jié)點(diǎn)遍歷、查找相關(guān)操作技巧,需要的朋友可以參考下2019-07-07
BootStrap實(shí)現(xiàn)帶關(guān)閉按鈕功能
這篇文章主要介紹了BootStrap實(shí)現(xiàn)帶關(guān)閉按鈕功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
class是創(chuàng)建對(duì)象的模版，由一系列屬性和方法構(gòu)成，用于表示對(duì)同一概念的數(shù)據(jù)和操作。有的屬性和方法是對(duì)外的，但也有的是私有的。本文梳理了六種私有屬性的實(shí)現(xiàn)方式，需要的可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)公告滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12