詳解微信小程序input標簽正則初體驗

更新時間：2018年08月18日 17:02:39 作者：阿哲

這篇文章主要介紹了詳解微信小程序input標簽正則初體驗，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

開篇廢話

在開發(fā)過程中經(jīng)常遇到這樣的需求：用戶只能輸入數(shù)字并且只保留小數(shù)點兩位。雖然我們可以在提交表單的時候進行驗證，但是體驗不是很好。下面我主要使用了小程序input標簽的bindinput方法對輸入的值進行監(jiān)聽，然后進行正則匹配。

1. input標簽

微信小程序input標簽自帶type=digit屬性，可以調(diào)起帶有小數(shù)點的數(shù)字鍵盤，maxlength屬性可以控制我們輸入字符的個數(shù)，然后我們給input標簽綁定bindinput方法。

<input type="digit" bindinput="regInput" maxlength="15"/>

2. 綁定監(jiān)聽事件

bindinput方法可以監(jiān)聽到當前輸入框的值，類似于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);
  }
}

結束

這個正則表達式不是很完美，歡迎一起來優(yōu)化。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

基于javascript實現(xiàn)的快速排序
本篇文章主要介紹了javascript實現(xiàn)的快速排序的方法與原理說明：找基準點、建立二個數(shù)組分別存儲、遞歸。需要的朋友來看下吧
2016-12-12
關于前端文件下載各類方式大匯總
這篇文章主要介紹了關于前端文件下載各類方式大匯總，具有很好的參考價值，希望對大家有所幫助。
2022-08-08
以JSON形式將JS中Array對象數(shù)組傳至后臺的方法
業(yè)務是需要將前臺jQuery easyUI DataGrid列表中所選的若干行的數(shù)據(jù)傳到后臺進行update操作，具體的實現(xiàn)如下，感興趣的朋友可以參考下
2014-01-01
js實現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的三種方式
Blob對象表示一個不可變、原始數(shù)據(jù)的類文件對象,Blob表示的不一定是JavaScript原生格式的數(shù)據(jù),下面這篇文章主要給大家介紹了關于js實現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的三種方式,需要的朋友可以參考下
2023-04-04
canvas紅包照片實例分享
本文主要分享了canvas紅包照片的實例代碼，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
JS和Jquery獲取和修改label的值的示例代碼
label標簽在JS和Jquery中使用不能像其他標簽一樣用value獲取它的值，下面有個不錯的示例，希望大家可以學習下
2014-01-01
JS查找孩子節(jié)點簡單示例
這篇文章主要介紹了JS查找孩子節(jié)點,結合完整實例形式分析了javascript節(jié)點遍歷、查找相關操作技巧,需要的朋友可以參考下
2019-07-07
BootStrap實現(xiàn)帶關閉按鈕功能
這篇文章主要介紹了BootStrap實現(xiàn)帶關閉按鈕功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-02-02
一文詳解JS私有屬性的6種實現(xiàn)方式
class是創(chuàng)建對象的模版，由一系列屬性和方法構成，用于表示對同一概念的數(shù)據(jù)和操作。有的屬性和方法是對外的，但也有的是私有的。本文梳理了六種私有屬性的實現(xiàn)方式，需要的可以參考一下
2022-03-03
原生js實現(xiàn)公告滾動效果
這篇文章主要為大家詳細介紹了原生js實現(xiàn)公告滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12