1. 程式人生 > >正則限制輸入為數字,且最多輸入2位小數 之 新寫法

正則限制輸入為數字,且最多輸入2位小數 之 新寫法

符號 接受 fff asc pad 函數 ext www 對象

  原本小程序需要一個限制文本框輸入為數字,且最多保留2位小數的效果,網上找到的例子感覺有點繁瑣,就自己寫了一個。

代碼很簡單,主要借助了正則的組匹配特性進行處理:

//檢查輸入文本,限制只能為數字並且數字最多帶2位小數
  checkInputText: function(text){

    var reg = /^(\.*)(\d+)(\.?)(\d{0,2}).*$/g;

    if (reg.test(text)) { //正則匹配通過,提取有效文本
      text = text.replace(reg, ‘$2$3$4‘);
    }
    else { //正則匹配不通過,直接清空
text = ‘‘; } return text; //返回符合要求的文本(為數字且最多有帶2位小數) }

1、用在小程序上的示例Demo:

*.wxml文件代碼:

技術分享圖片
<view class=‘row‘>
        <view class="title">文本輸入限制輸入數字,且最多帶2位小數</view>
        <input type=‘digit‘ placeholder=‘請輸入有效數字‘ bindinput=‘inputNum‘ class=‘numInput‘/>
    </view>
View Code

相應*.js文件關鍵代碼:

技術分享圖片
//監聽文本輸入
  inputNum: function (e) {
    return this.checkInputText(e.detail.value);
  },
  //檢查輸入文本,限制只能為數字並且數字最多帶2位小數
  checkInputText: function(text){

    var reg = /^(\.*)(\d+)(\.?)(\d{0,2}).*$/g;

    if (reg.test(text)) { //正則匹配通過,提取有效文本
      text = text.replace(reg, ‘$2$3$4‘);
    }
    
else { //正則匹配不通過,直接清空 text = ‘‘; } return text; //返回符合要求的文本(為數字且最多有帶2位小數) }
View Code

2、用在web網頁上的示例Demo:

技術分享圖片
<div>
            <br/>
            <h3>限制文本框輸入為數字,且最多輸入2位小數</h3>
            <p><input type="number" oninput="inputText(this);"/></p>
        </div>
        <script type="text/javascript">
            //監聽文本框輸入,限制其輸入為數字,且最多只能輸入2位小數
            function inputText(obj){
                obj.value = checkInputText(obj.value);
            }

            //檢查輸入文本,限制只能為數字並且數字最多帶2位小數
            function checkInputText(text){

                var reg = /^(\.*)(\d+)(\.?)(\d{0,2}).*$/g;

                if (reg.test(text)) { //正則匹配通過,提取有效文本
                    text = text.replace(reg, ‘$2$3$4‘);
                }
                else { //正則匹配不通過,直接清空
                    text = ‘‘;
                }

                return text;
            }
        </script>
View Code

3、String.prototype.replace() 使用

  字符串對象的replace方法可以替換匹配的值。它接受兩個參數,

  第一個參數是表示要被替換的內容,可以用字符串表示,也可以用正則表達式,表示搜索模式;

  第二個參數是表示要替換第一個參數的內容。

  使用正則表達式時,replace方法的第二個參數可以使用美元符號$, 用來指代所替換的內容:

$&: 匹配的子字符串
$·: 匹配結果前面的文本
$: 匹配結果後面的文本
$n: 匹配成功的第n組內容,n是從1開始的自然數
$$: 指代美元符號$

舉例說明其用法:

技術分享圖片
//1、將匹配的組互換位置
var str1 = ‘hello world‘.replace(/(\w+)\s(\w+)/, ‘$2 $1‘);
console.log(‘str1 = ‘ + str1); 
//str1 = world hello


//2、改寫匹配的值
var str2 = ‘abc‘.replace(‘b‘, ‘[$` - $& - $\‘]‘);
console.log(‘str2 = ‘ + str2); 
//str2 = a[a - b - c]c


//3、replace方法的第二個參數還可以是一個函數,將每一個匹配內容替換為函數返回值
var str3 = ‘3 and 5‘.replace(/[0-9]+/g, function(match){
    return 2 * match;
});
console.log(‘str3 = ‘ + str3); 
//str3 = 6 and 10


//4、replace方法第二個參數的替換函數,還可以接受多個參數。
//其中第一個參數是捕捉到的內容,從第二個參數起後面的參數表示是捕捉到的組匹配(有多少個組匹配,就有多少個對應的參數)
//下面寫一個網頁模板替換的例子
var prices = {
  ‘p1‘: ‘¥1.99‘,
  ‘p2‘: ‘¥9.99‘,
  ‘p3‘: ‘¥5.00‘
};

var template = ‘<span id="p1"></span>‘
  + ‘<span id="p2"></span>‘
  + ‘<span id="p3"></span>‘;

var str4 = template.replace(
  /(<span id=")(.*?)(">)(<\/span>)/g,
  function(match, $1, $2, $3, $4){
    return $1 + $2 + $3 + prices[$2] + $4;
  }
);
console.log(‘str4 = ‘ + str4);
//str4 = <span id="p1">¥1.99</span><span id="p2">¥9.99</span><span id="p3">¥5.00</span>
View Code

然後就應該明白正則/^(\.*)(\d+)(\.?)(\d{0,2})(.*)*.*$/g的含義了,共有4個匹配組

var reg = /^(\.*)(\d+)(\.?)(\d{0,2}).*$/g;
/*
正則表達式reg裏包含了4個匹配組,分別是:
(\.*) : 匹配輸入的第一個字符為小數點. , 對應組匹配符號$1
(\d+) : 匹配輸入小數點.之前的數字, 對應組匹配符號$2
(\.?) : 匹配小數點. , 對應組匹配符號$3
(\d{0,2}) : 匹配小數點後面數字,小數點後限制幾位小數重復符號{m,n}就可以寫到幾,對應組匹配符號$4
*/

版權聲明


作者:TDX

出處:博客園TDX的技術博客--http://www.cnblogs.com/tandaxia

您的支持是對博主最大的鼓勵,感謝您的認真閱讀。

本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。

正則限制輸入為數字,且最多輸入2位小數 之 新寫法