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' onkeypress='intnumber(this,false,8)' style='ime-mode:disabled' onpaste='return false'/>

<input type='text' name='tjyhsje' id='tjyhsje' onkeypress='floatnumber(this,false,11,2)' style='ime-mode:disabled' onpaste='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代碼中更簡潔一些，比較適合作爲通用控件，且使用粘貼功能時也會通過正則表達式判斷