Text的输入校验

最新推荐文章于 2021-08-01 13:53:58 发布

iteye_13237

最新推荐文章于 2021-08-01 13:53:58 发布

阅读量276

点赞数

分类专栏： Java 文章标签： prototype

Java 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

对于页面当中的Text进行输入校验，看似简单，涉及到的内容还比较复杂。
为了提高未来的开发效率，花了一些时间写了以下这个较为全面的校验例子：

1.[b]限制因素[/b]：
当输入为任意字符时，一般情况下长度是唯一的限制因素;
当输入为数字型时，一般情况下是数值的大小.

2.[b]监听动作[/b]
包括keypress, paste动作;

3.[b]其他要求[/b]
.对于keypress, 字符允许在任意位置输入;
.对于paste, 字符允许在任意位置paste, 当最终长度将超出时, 从剪切板中截取合适长度的字符进行粘贴;
.不允许出现字符短暂出现后又因为无法通过校验而被删除的现象, 造成不好的用户体验.

4.[b]遗留问题[/b]
.当keypress对于数字型输入时, 当输入的数字不落在最后一个数字后, 且不能够通过校验, 会出现光标位置自动跳移到字符串最后的现象. 因为Text在onpropertychange时被previousValue替换, 而不是在onkeypress时就被阻止.


<html>
<head>
<title>输入文本框校验</title>
<script type="text/javascript">
<!--
	var CHAR = 1;
	var NUMBER = 2;

	// Validation object, This is where to define validation limitation.
	var validation = new Object();
	validation.type = NUMBER;
	validation.maxValue = 200;

	window.onload = addListeners;

	// Add listeners to elements
	function addListeners()
	{
		var text = document.getElementById('wText');

		text.onkeypress = function() {
			return checkKeyPress(text, validation);
		}
		text.onpaste = function() {
			return checkPaste(text, validation);
		}
		text.onpropertychange = function() {
			return checkAfterPropertyChanged(text, validation);
		}
	}

	// Listener for key pressed
	function checkKeyPress(text, validation)
	{
		var str = text.value;

		if(validation.type == CHAR) 
		{
			// validate character length
			if(validation.length) 
			{
				var oSR=document.selection.createRange();
				if(str.length<validation.length)
					return true;
				else if(oSR.text.length>0)
					return true;
				else
					return false;
			}
		}
		else if(validation.type == NUMBER)
		{
			// validate key input is a digit
			var key = window.event ? event.keyCode : event.which;
			var keychar = String.fromCharCode(key);
			if(!checkDigit(keychar)) return false;

			text.previousValue = text.value;
		}
	}

	// Listener for paste action
	function checkPaste(text, validation)
	{
		var str=text.value;
		var oSR=document.selection.createRange();
		var strData=clipboardData.getData('text');

		// save original value to rolllback
		text.previousValue = str;

		if(validation.type == CHAR)
		{
			// validate character length
			if(validation.length) 
			{
				var iLenPaste=validation.length-str.length+oSR.text.length;
				oSR.text=strData.substring(0,iLenPaste);
				return false;
			}
		}
		else if(validation.type == NUMBER)
		{
			// validate value pasted is a number
			if(!checkDigit(strData)) return false;

			text.previousValue = text.value;
		}
	}

	// Check after keypress or paste
	function checkAfterPropertyChanged(text, validation)
	{
		// only listen for property 'value'
		if(event.propertyName != 'value') return;

		if(validation.type == NUMBER)
		{
			if(text.value.strip() == '') return;

			var value = parseInt(text.value);
			if(isNaN(value) || value > validation.maxValue)
			{
				text.value = text.previousValue; // reset to previous value
			}
		}
	}

	// check whether char inputted is a number
	function checkDigit(s)
	{
		var regx = /^\d+$/;
		return regx.test(s);
	}

	String.prototype.strip = function() 
	{
		return this.replace(/^\s+/, '').replace(/\s+$/, '');
	}

// -->
</script>
</head>

<body>
<input type="text" id="wText" />
</body>

iteye_13237

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Text的输入校验

对于页面当中的Text进行输入校验，看似简单，涉及到的内容还比较复杂。为了提高未来的开发效率，花了一些时间写了以下这个较为全面的校验例子：1.[b]限制因素[/b]：当输入为任意字符时，一般情况下长度是唯一的限制因素;当输入为数字型时，一般情况下是数值的大小.2.[b]监听动作[/b]包括keypress, paste动作;3.[b]其他要求[/b].对...
复制链接

扫一扫