之前项目中用到的验证数据的javascript脚本,不知从哪找的或是哪位大牛写的,反正,项目一直在用,效果就是可以输入正负数字,小数等,但对位数等没有限制。代码如下:
function setOnlyNum() {
$(this).css("ime-mode", "disabled");
$(this).attr("t_value", "");
$(this).attr("o_value", "");
$(this).bind("dragenter",function(){
return false;
});
$(this).keypress(function (){
if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value;
}).keyup(function (){
if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value;
}).blur(function (){
if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value;}
//if(this.value.length == 0) this.value = "0";
});
//this.text.selected;
}
最近项目中需要用到大量的数字,并且对整数、小数有严格的限制,这样,上面的这个代码便无法达到要求了,在网上也没找到合适的代码,没办法,根据自己略微知道点的正则表达式的知识,对上面的脚本进行改写,最终代码如下:
/**
* Number Validator
* @author Hui,Gang (mr.huig [at] gmail.com)
* @version Build 20120708
* @version Build 20120709 处理在ie678下的兼容问题
* @version Build 20120717 处理只能输入整数的情况
* @useage
* 1、import jQuery.js
* 2、import this file
* 3、eg
initNumberValidator("#a1,#a2,#a3", 0, 2) // 0位小数,2位整数
initNumberValidator("#a4", 3, 2) // 3位小数,2位整数
initNumberValidator("#a5", 2) // 2位小数
initNumberValidator("#a6") // 4位小数,10位整数
* @param $d 需要处理的文件框ID,jQuery选择ID形式。多个以逗号分割,如#a1,#a2,#a3
* @param _dc_ 小数位数,如果只输入整数的话可以写成0,可以不写,默认长度为4
* @param _ic_ 整数位数,可以不写,默认长度为10
*
*/
function initNumberValidator($d, _dc_, _ic_){
$($d).each(function(){
$(this).focus=(function(o, _dc_, _ic_){
var ___decimal_count___ = _dc_ == 0 ? 0 : _dc_ || 4;
var ___int_count___ = _ic_ < 1 ? 1 : _ic_ || 10;
$(o).css("ime-mode", "disabled");
$(o).attr("t_value", "");
$(o).attr("o_value", "");
$(o).bind("dragenter",function(){
return false;
});
if(___decimal_count___ == 0) {//整数
$(o).keypress(function(){
if(!o.value.match(new RegExp("^[\\+\\-]?\\d{0,"+___int_count___+"}$"))){o.value=o.t_value;}else{o.t_value=o.value;}if(o.value.match(new RegExp("^[\\+\\-]?\\d{0,"+___int_count___+"}$"))){o.o_value=o.value;}
}).keyup(function(){
if(!o.value.match(new RegExp("^[\\+\\-]?\\d{0,"+___int_count___+"}$"))){o.value=o.t_value;}else{o.t_value=o.value;}
if(o.value.match(new RegExp("^[\\+\\-]?\\d{0,"+___int_count___+"}$"))){o.o_value=o.value;}
}).blur(function(){
if(!o.value.match(new RegExp("^[\\+\\-]?\\d{0,"+___int_count___+"}$"))){o.value=o.o_value;}else{if(o.value.match(/^\.\d+$/))o.value=0+o.value;if(o.value.match(/^\.$/))o.value=0;o.o_value=o.value;}
if(o.value.length==0)o.value=0;});
} else {//小数
$(o).keypress(function(){
if(!o.value.match(new RegExp("^(?:[\\+\\-]?\\d{0,"+___int_count___+"}(?:\\.\\d{0,"+___decimal_count___+"})?|\\.\\d{0,"+___decimal_count___+"}?)?$"))){o.value=o.t_value;}else{o.t_value=o.value;}
if(o.value.match(new RegExp("^(?:[\\+\\-]?\\d{0,"+___int_count___+"}(?:\\.\\d{0,"+___decimal_count___+"})?)?$"))){o.o_value=o.value;}
}).keyup(function(){
if(!o.value.match(new RegExp("^(?:[\\+\\-]?\\d{0,"+___int_count___+"}(?:\\.\\d{0,"+___decimal_count___+"})?|\\.\\d{0,"+___decimal_count___+"}?)?$"))){o.value=o.t_value;}else{o.t_value=o.value;}
if(o.value.match(new RegExp("^(?:[\\+\\-]?\\d{0,"+___int_count___+"}(?:\\.\\d{0,"+___decimal_count___+"})?)?$"))){o.o_value=o.value;}
}).blur(function(){
if(!o.value.match(new RegExp("^(?:[\\+\\-]?\\d{0,"+___int_count___+"}(?:\\.\\d{0,"+___decimal_count___+"})?|\\.\\d{0,"+___decimal_count___+"}?)?$"))){o.value=o.o_value;}else{if(o.value.match(/^\.\d+$/))o.value=0+o.value;if(o.value.match(/^\.$/))o.value=0;o.o_value=o.value;}
if(o.value.length==0)o.value=0;});
}
})(this, _dc_, _ic_);
})
}
实现的功能及使用方法注释里都有说明。
在编写这段脚本时有两个问题是比较困扰的,花费了比较长的时间来解决:
第一:两种正则表达式书写的方式不同。因为现在是需要动态的调整验证的长度,所以必须要能动态的拼成验证脚本:
因为之前用的都是最简便的书写方法,比如只能输入数字的正则表达式为:
/^\d+$/
换成RegExp类时要做转换:
new RegExp("^\\d+")
主要就是将前后的/去掉,必须用\\来替换所有的\字符。
第二:闭包的使用。
因为所有的整数或小数长度都是动态处理的,之前根据平常所写的那样,通过普通方法来处理,发现验证的效果始终是最后次定义的。所以,使用了闭包,问题解决。
附完整demo下载地址:http://download.csdn.net/detail/tegwy/4466651