一. 输入时验证
有的时候,在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)); } } });
谢谢!!