微信小程序input標籤正則初體驗

在開發過程當中常常遇到這樣的需求：用戶只能輸入數字而且只保留小數點兩位。雖然咱們能夠在提交表單的時候進行驗證，可是體驗不是很好。下面我主要使用了小程序input標籤的bindinput方法對輸入的值進行監聽，而後進行正則匹配。

1. 微信小程序input標籤自帶type=digit屬性，能夠調起帶有小數點的數字鍵盤，maxlength屬性能夠控制咱們輸入字符的個數，而後咱們給input標籤綁定bindinput方法。

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

複製代碼

2. bindinput方法能夠監聽到當前輸入框的值，相似於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);
    }
}
複製代碼

4. 結束：這個正則表達式不是很完美，歡迎一塊兒來優化。