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));
      }
    }
  });


谢谢!!

相关文章
|
1月前
|
JSON 算法 安全
Nest.js JWT 验证授权管理
Nest.js JWT 验证授权管理
90 3
Nest.js JWT 验证授权管理
|
1月前
egg.js 24.18参数验证
egg.js 24.18参数验证
40 0
egg.js 24.18参数验证
|
1月前
|
存储 JavaScript 前端开发
账号登录验证(原生js,本地存储)
账号登录验证(原生js,本地存储)
32 0
|
1月前
|
JavaScript 数据安全/隐私保护
JS正则验证密码
JS正则验证密码
44 0
|
5天前
|
前端开发 JavaScript
阿里云验证码2.0 验证时报错 前端页面获取的验证参数有问题,动态JS加载失败,请问怎么解决啊?急,急,急。
用户反馈校验时遇到错误,日志显示验证码参数获取异常。采用无痕验证,失败后,返回`{captchaResult:false,bizResult:false}`,未触发滑块二次验证。
|
7月前
|
JavaScript 数据安全/隐私保护
js 常用类型验证
js 常用类型验证
65 0
|
1月前
|
JavaScript 前端开发 PHP
34、文件上传 -- 绕过JS验证
34、文件上传 -- 绕过JS验证
39 0
|
1月前
|
算法 JavaScript
|
11月前
|
开发框架 JavaScript 前端开发
Javascript实现具有验证功能的页面登录
Javascript实现具有验证功能的页面登录
118 0