关于input文本框只能输入数字的几种实用方法!!!

最近在做jsp动态表格的时候,常常会遇到一些金额、数量等,只能输入数字,问题虽然简单,但是走了一些弯路,在此总结一下。

这个问题有三种解决方案,第一种最适用。

1.使用isNaN()函数

isNaN()的缺点就在于 null、空格以及空串会被按照0来处理,所以需要前面剔除;

NaN: Not a Number

/**
*判断是否是数字
**/

1
2
3
4
5
6
7
8
9
10
11
function  isRealNum(val){
     // isNaN()函数 把空串 空格 以及NUll 按照0来处理 所以先去除
     if (val ===  ""  || val == null ){
         return  false ;
     }
     if (!isNaN(val)){
         return  true ;
     } else {
         return  false ;
     }
}           
上段js可以直接引入项目,在需要判断的地方直接调用即可,是最为合理的一种方案!
if (!isRealNum(amount)) {
    $("#zcsg_yz").html("*<spring:message code='peraseEnter.number'/>");
    $("#zcsg_yz").css("display", "inline");
    tds.eq(3).children().val('');
    return;
}

2.设置input的type属性为“number”,此种方法虽然可以达到目的,但是存在着两个问题;

<1>之前给input设置的

maxlength="20"

不起作用了,也就是说你控制的最大值可以通过min、max 和 step 属性去设置

注:min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。 max 属性规定输入域所允许的最大值。 min 属性规定输入域所允许的最小值。 step 属性为输入域规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)。

<2>样式问题

在input的最右边会产生两个上下箭头,点击箭头数字会加减,由于样式与表格不搭,所有没有采用;

3.正则表达式验证

这种也可以,具体的js为:

var price = tds.eq(2).children().val() - 0;
if (price == "" || price == null) {
    price = 0;
}
var pattern = /^[0-9]+(.[0-9]{0,3})?$/;
if (!pattern.test(price)) {
    $("#zcsg_yz").html("*请输入数字");
    $("#zcsg_yz").css("display", "inline");
    tds.eq(2).children().val('');
    return;
}

然后在input里面加onkeyup、onkeydown事件调用。

但是在实际过程中,做了这种校验后,当我输入121.的时候,会校验失败,这也就是我最后用第一种的原因。

以上纯手打,如有不当之处,烦请指正!


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值