爱一个人是一回事,拥有一个人是另外一回事,爱上并拥有一个人,更是另外一回事。 蝴蝶,是什么,是希望,是真正的希望。
上一章简单介绍了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));
}
}
});
谢谢!!