前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >正则限制输入为数字,且最多输入2位小数 之 新写法

正则限制输入为数字,且最多输入2位小数 之 新写法

作者头像
tandaxia
发布2018-09-27 15:37:33
8.3K0
发布2018-09-27 15:37:33
举报
文章被收录于专栏:谈补锅

  原本小程序需要一个限制文本框输入为数字,且最多保留2位小数的效果,网上找到的例子感觉有点繁琐,就自己写了一个。

代码很简单,主要借助了正则的组匹配特性进行处理:

代码语言:javascript
复制
//检查输入文本,限制只能为数字并且数字最多带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文件代码:

代码语言:javascript
复制
<view class='row'>
        <view class="title">文本输入限制输入数字,且最多带2位小数</view>
        <input type='digit' placeholder='请输入有效数字' bindinput='inputNum' class='numInput'/>
    </view>

相应*.js文件关键代码:

代码语言:javascript
复制
//监听文本输入
  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位小数)
  }

2、用在web网页上的示例Demo:

代码语言:javascript
复制
<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>

3、String.prototype.replace() 使用

  字符串对象的replace方法可以替换匹配的值。它接受两个参数,

  第一个参数是表示要被替换的内容,可以用字符串表示,也可以用正则表达式,表示搜索模式;

  第二个参数是表示要替换第一个参数的内容。

  使用正则表达式时,replace方法的第二个参数可以使用美元符号$, 用来指代所替换的内容:

代码语言:javascript
复制
$&: 匹配的子字符串
$·: 匹配结果前面的文本
$': 匹配结果后面的文本
$n: 匹配成功的第n组内容,n是从1开始的自然数
$$: 指代美元符号$

 举例说明其用法:

代码语言:javascript
复制
//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>

然后就应该明白正则/^(\.*)(\d+)(\.?)(\d{0,2}).*$/g的含义了,共有4个匹配组

代码语言:javascript
复制
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

您的支持是对博主最大的鼓励,感谢您的认真阅读。

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-08-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档