JS实现输入时验证(十七)

爱一个人是一回事，拥有一个人是另外一回事，爱上并拥有一个人，更是另外一回事。 蝴蝶，是什么，是希望，是真正的希望。
上一章简单介绍了JS实现金额千分位化(十六),如果没有看过,请观看上一章。

一. 输入时验证

有的时候，在input 框里面输入值时，如输入姓名时， 并不是简单的 输入所有的数值之后，移出焦点时，去判断输入的正不正确， 最明显的是， 金额输入时，并不是验证 输入的值是否正确， 而是在输入的过程中，不正确，或者是不合法的字符会被自动写不上去， 是进行的提前的验证。 如在输入金额的时候，如果输入字符 a bc d ，是输入不进去的，而不是在输入之后，提示输入不正确。 并不是以前简单的 onblur() 事件，而是onKeyup() 事件，并且onKeyup 并不是弹出错误信息，而是不让输入。
用正则进行相应的验证。

如一个简单的输入框:

<input type="text" class="form-control" id="username"
							maxlength="20" placeholder="中、英文组成" >

二. 验证只能是中英文

在keyup 事件时，进行绑定

onkeyup="value=value.replace(/[^\a-zA-Z\u4E00-\u9FA5]/g,'')"

所以，总的就是:

<input type="text" class="form-control" id="username"
							maxlength="20" placeholder="中、英文组成"
							onkeyup="value=value.replace(/[^\a-zA-Z\u4E00-\u9FA5]/g,'')">

三.验证 只能是英文和数字

用的是:

onkeyup="value=value.replace(/[\W]/g,'')"

那么，总的就是:

<input type="text" class="form-control" id="useryhname"
							maxlength="20" placeholder="英文、数字组成 "
							onkeyup="value=value.replace(/[\W]/g,'')">

四.验证只能是数字

既可以用onkeyup 的方式，进行正则替换，也可以写成方法的形式。
如:

onkeyup="onlyNumber(this)"

那么，就可以 写onlyNumber() 来进行验证相关的数字信息了。

<input type="text" class="form-control" id="entrysalary"
							maxlength="20" onkeyup="onlyNumber(this)" />

所对应的方法为: onlyNumber(this)

/**
 * 只能输入双精度的正数（金额格式专用）
 */
var onlyNumber=function(obj){ //传入的是一个js对象。
	//得到第一个字符是否为0
	var t = obj.value.charAt(0); 
	//得到第二个字符
	var t2=obj.value.charAt(1); 
	//先把非数字的都替换掉，除了数字和. 
	obj.value = obj.value.replace(/[^\d\.]/g,''); 
	//必须保证第一个为数字而不是. 
	obj.value = obj.value.replace(/^\./g,''); 
	//保证只有出现一个.而没有多个. 
	obj.value = obj.value.replace(/\.{2,}/g,'.'); 
	//保证.只出现一次，而不能出现两次以上 
	obj.value = obj.value.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
	//如果第一位是0，则允许添加
	if(t2!=''&&t2!='.'&&t=='0'){
		obj.value = obj.value.substr(1);
	}
	var v=obj.value;
	var index=v.indexOf(".");
	if(index!=-1&&v.split(".")[1].length>2){//表示有小数点
		obj.value=v.substr(0,index+3);  //截取两位。
	}
}

五. 也可以写 keyup()事件来触发

	//日期限制只能输入正整数
	$("#days").keyup(function(){
		this.value=this.value.replace(/\D/g,'')
		if(this.value!=""){
			//如果天数为0，则显示为空。
			if(parseInt(this.value)==0){
				$(this).val("");
			}else{
				$(this).val(parseInt(this.value));
			}
		}
	});

谢谢!!