JSP页面控制准确输入数值

     JSP页面开发时常常碰到这个问题，界面上给出一个输入框，要控制准确输入符合要求的数值，屏蔽不合法的输入。通常的做法是页面提交时做个js函数做合法性校验，引用一句话“这种方式就是'用户已经做了，我们才告诉用户不能这么做'，而没有做到让用户只能输入我们指定范围内的字符，让'用户永远没有机会去犯错'"。

     所以下面用两种方式来举例如何控制用户不输入非法数值。例如：界面输入框输入一个整数和一个浮点数，数据库定义为Number(8)和Number(11,2)时

第一种方式用普通的js方式实现

 

/*-- 
		floatnumber 控制正确输入浮点数
		obj         判断的控件
		negative    是否允许负数
		precision   有效位数
		scale       精确位数
		*/
		function floatnumber(obj,negative,precision,scale)
		{
			var char = String.fromCharCode(event.keyCode)
			var re ;
			if(emptyStr(precision) || emptyStr(scale) || !/\d/g.test(precision) || !/\d/g.test(scale))
			{
				if(negative)
				{
					re = new RegExp('^-?\\d*(\\.\\d*)?$'); 
				}else{
					re = new RegExp('^\\d*(\\.\\d*)?$'); 
				}
			}else{
				if(negative)
				{
					re = new RegExp('^-?\\d{0,'+(precision-scale)+'}(\\.\\d{0,'+scale+'})?$'); 
				}else{
					re = new RegExp('^\\d{0,'+(precision-scale)+'}(\\.\\d{0,'+scale+'})?$'); 
				}
				
			}
			var str = obj.value.trim() + char
			event.returnValue = str.match(re) != null ? true : false
		}
		
		/*-- 
		intnumber   控制正确输入整数
		obj         判断的控件
		negative    是否允许负数
		precision   有效位数
		*/
		function intnumber(obj,negative,precision)
		{
			var char = String.fromCharCode(event.keyCode)
			var re ;
			if(emptyStr(precision) || !/\d/g.test(precision))
			{
				if(negative)
				{
					re = new RegExp('^-?\\d*$'); 
				}else{
					re = new RegExp('^\\d*$'); 
				}
			}else{
				if(negative)
				{
					re = new RegExp('^-?\\d{0,'+precision+'}$'); 
				}else{
					re = new RegExp('^\\d{0,'+precision+'}$'); 
				}
				
			}
			var str = obj.value.trim() + char
			event.returnValue = str.match(re) != null ? true : false
		}
		
		//判断是否空串
		function emptyStr(val){
			if(val===undefined || val==null){
				return true;
			}
			if(val=="" || val==" " || val=="null" || val=="NULL" || val=="undefine" || val=="undefined" || val=="UNDEFINED")
				return true;
			else
				return false;
		}

然后在input定义时加上

<input type='text' name='tjyhsje' id='tjyhsje' οnkeypress='intnumber(this,false,8)' style='ime-mode:disabled' οnpaste='return false'/>

<input type='text' name='tjyhsje' id='tjyhsje' οnkeypress='floatnumber(this,false,11,2)' style='ime-mode:disabled' οnpaste='return false'/>

在禁用输入法和粘贴的同时控制输入位数

 

第二种方式时通过Jquery实现

编写一个j-common.js

// ----------------------------------------------------------------------
// <summary>
// 限制只能输入整数
// negative  true:false  是否允许负数
// precision 有效位数
// </summary>
// ----------------------------------------------------------------------
$.fn.intnumber = function(negative, precision) {
	var re;
	if (emptyStr(precision) || !/\d/g.test(precision)) {
		if (negative) {
			re = new RegExp('^-?\\d*$');
		} else {
			re = new RegExp('^\\d*$');
		}
	} else {
		if (negative) {
			re = new RegExp('^-?\\d{0,' + precision + '}$');
		} else {
			re = new RegExp('^\\d{0,' + precision + '}$');
		}

	}
	$(this).keypress(function(event) {
		var char = String.fromCharCode(event.keyCode);
		var str = this.value.trim() + char;
		return str.match(re) != null ? true : false;
	}).focus(function() {
		// 禁用输入法
		this.style.imeMode = 'disabled';
	}).bind("paste", function() {
		// 获取剪切板的内容
		var clipboard = window.clipboardData.getData("Text");
		if (re.test(clipboard))
			return true;
		else
			return false;
	});
};

// ----------------------------------------------------------------------
// <summary>
// 限制只能输入浮点数
// negative  true:false  是否允许负数
// precision 有效位数
// scale     精确位数
// </summary>
// ----------------------------------------------------------------------
$.fn.floatnumber = function(negative, precision, scale) {
	var re;
	if (emptyStr(precision) || emptyStr(scale) || !/\d/g.test(precision)
			|| !/\d/g.test(scale)) {
		if (negative) {
			re = new RegExp('^-?\\d*(\\.\\d*)?$');
		} else {
			re = new RegExp('^\\d*(\\.\\d*)?$');
		}
	} else {
		if (negative) {
			re = new RegExp('^-?\\d{0,' + (precision - scale) + '}(\\.\\d{0,'
					+ scale + '})?$');
		} else {
			re = new RegExp('^\\d{0,' + (precision - scale) + '}(\\.\\d{0,'
					+ scale + '})?$');
		}

	}
	$(this).keypress(function(event) {
		var char = String.fromCharCode(event.keyCode);
		var str = this.value.trim() + char;
		return str.match(re) != null ? true : false;
	}).focus(function() {
		// 禁用输入法
		this.style.imeMode = 'disabled';
	}).bind("paste", function() {
		// 获取剪切板的内容
		var clipboard = window.clipboardData.getData("Text");
		if (re.test(clipboard))
			return true;
		else
			return false;
	});
};

然后在jsp页面引用JQuery后引用此js

<script type="text/javascript" src="<%=path%>/js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="<%=path%>/js/jquery-ui-1.10.3.custom.js"></script>	
	<script type="text/javascript" src="<%=path%>/js/jquery.blockUI.js"></script>
<script type="text/javascript" src="<%=path%>/js/j-common.js"></script>

在加载时绑定

$(function() {
$(".floatnumber").floatnumber(false,11,2);
$(".intnumber").intnumber(false,8);	
}); 

input输入框绑定类

<input type='text' name='tjyhsje' id='tjyhsje' class='floatnumber'/>
<input type='text' name='tjyhsje' id='tjyhsje' class='intnumber'/>

 

两种方式比较第二种方式JSP代码中更简洁一些，比较适合作为通用控件，且使用粘贴功能时也会通过正则表达式判断