正则限制输入为数字,且最多输入2位小数 之 新写…
2018-09-01 05:48:59来源:博客园 阅读 ()
原本小程序需要一个限制文本框输入为数字,且最多保留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>
相应*.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位小数) }
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>
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>
然后就应该明白正则/^(\.*)(\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 */
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:vue父子组件之间传值
- javascript特殊文本输入框网页特效 2020-03-16
- textarea不能通过maxlength属性来限制字数的解决方法 2019-12-21
- jQuery实现动态添加、删除按钮及input输入框的方法 2019-12-15
- js判断文本框剩余可输入字数的方法 2019-12-13
- 总结js限制文本框的输入数字方法 2019-12-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash