input正则匹配只能输入数字和指定位数小数点

最新推荐文章于 2024-07-08 17:42:28 发布

ycj0630

最新推荐文章于 2024-07-08 17:42:28 发布

阅读量6.1k

点赞数

分类专栏： ž正则表达式

ž正则表达式专栏收录该内容

0 篇文章 0 订阅

订阅专栏

最近经常遇到input框的正则匹配验证，每次都是查，觉得挺麻烦的，所以就留了博客，方便以后随时查阅。这也不是我的原创，是别人的劳动成果，我拿过来用而已。

1、只能输入指定位数的数字：

比如只能输入四位正整数：

<input type="text" class="acreage" oninput="if(value.length>4)value=value.slice(0,4)" onkeypress="return event.keyCode>=48&&event.keyCode<=57" ng-pattern="/[^a-zA-Z]/"/>

2、只能输入数字和保留三位小数点：

<input onkeypress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d{2}$/.test(value))event.returnValue=false" type="text" />

其中{}中的数字是小数点后面可以保留的几位小数，比如0就是保留一位小数，1就是保留两位小数。

3、JQ的validate验证：

只能输入1-10之间的数字：

<input type="text" class="form-control" required="required" max="10" min="1" id="" name="dz_discount1" onkeypress="return event.keyCode>=48&&event.keyCode<=57" ng-pattern="/[^a-zA-Z]/" placeholder="请输入1到10之间的数字">

前面的max和min，控制的是输入的规则。如果input的类型是‘type=text’，在中文状态下是可以输入中文的，

所以要加键盘正则匹配，禁用中文。当然啦，前提是引用jq的validate。

4、select选中验证：

也是用的JQvalidate：

<select required="required" name="dz_select" id="" class="form-control">
<option value="">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

默认选中第一个，当选择1或者2的时候，验证就通过。不需要写js代码，只需要加required行内验证就可以了。

5、只能输入整数，且首字母不能为0：

<input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">

6、终极版本只能输入两位小数：

html代码：

<input type="text" name="ipt1" id="ipt1" value="" />

js代码：

$("#ipt1").keyup(function () {
var reg = $(this).val().match(/\d+\.?\d{0,2}/);
var txt = '';
if (reg != null) {
txt = reg[0];
}
$(this).val(txt);
}).change(function () {
$(this).keypress();
var v = $(this).val();
if (/\.$/.test(v))
{
$(this).val(v.substr(0, v.length - 1));
}
});

到这里，顺便提一下踩到的坑。当我这么使用终极版的时候，出现了一个问题。流程是页面先引入JQ文件，然后写这串js代码，这样就可以顺利执行了（必须是JQ文件在上，js代码紧跟着在下，中间不得有任何代码。）。但是当我这么做的时候，页面上其他js文件就和JQuery文件冲突了，因为JQuery文件要在引用文件的最顶部，这样JQ才能生效。当我把JQ代码放到引用代码的最顶端，其他js代码可以正常执行，但是这串js代码就无法执行了。

所以一番查找和求助之后，师傅告诉了我这么一个方法：

var Jq = jQuery.noConflict();
Jq(document).ready(function(){
Jq("#singlelv").keyup(function () {
var reg = Jq(this).val().match(/\d+\.?\d{0,2}/);
var txt = '';
if (reg != null) {
txt = reg[0];
}
Jq(this).val(txt);
}).change(function () {
Jq(this).keypress();
var v = Jq(this).val();
if (/\.$/.test(v))
{
Jq(this).val(v.substr(0, v.length - 1));
}
});
});

完美解决了这个问题。

牛人果然是牛人，没的说。

7、不可以输入中文

<input type="text" class="dz_text dz_text_input" name="" id="dz_age" value="" placeholder="整数，最多4位，不可以输入中文" maxlength="4" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"/>