参数验证

Posted 2020-11-12 小飞博客

js

  1 /*
  2 支持 IE9 +
  3 */
  4 
  5 // 在这里添加验证的验证name
  6 String.prototype.checkeParams=function(type,fn){
  7     if(!type)return;
  8     //参数为空 传0做标记
  9     if(this.trim().length===0){
 10         fn&&fn(0)
 11         return false;
 12     }else{
 13     //参数不为空
 14         switch(type){
 15             //正整数
 16             case ‘number‘:
 17             var reg=null;
 18             if(!/^[0-9]+$/.test(this)){
 19                 reg=false
 20             }else{
 21                 if(this.indexOf(‘.‘)==-1&&this.indexOf(‘-‘)==-1){reg=true}else{reg=false}
 22             }
 23             fn&&fn(reg);
 24             return reg;
 25 
 26 
 27             //手机号码
 28             case ‘phone‘:
 29             fn&&fn(/^[1][3,4,5,7,8][0-9]{9}$/.test(this));
 30             return /^[1][3,4,5,7,8][0-9]{9}$/.test(this);
 31 
 32 
 33             //用户名 2-4位中文
 34             case ‘username‘:
 35             fn&&fn(/^[\u2E80-\u9FFF]+$/.test(this)&&this.length>1&&this.length<5);
 36             return /^[\u2E80-\u9FFF]+$/.test(this)&&this.length>1&&this.length<5;
 37 
 38 
 39             //密码 大小写字母和数组的组合
 40             case ‘password‘:
 41             fn&&fn(/\w\w{5,17}/.test(this));
 42             return /\w\w{5,17}/.test(this);
 43 
 44             default:
 45             break;
 46         }
 47     }
 48 }
 49 //调用此函数初始化
 50 function initCheck(opt){
 51     if(!opt)return;
 52     var obj=opt.obj;
 53     var eleId=opt.eleId;
 54     var tips=opt.tips;
 55     //数据绑定
 56     for(var k in obj){
 57         Object.defineProperty(obj,k,{
 58             get:function(){
 59                 return obj
 60             },
 61             set:function(val){
 62                 var index=eleId.indexOf(k);
 63                 if(val.checkeParams(k)){
 64                     getByClass(‘checkitem‘)[index].style.borderColor=‘green‘;
 65                 }else{
 66                     getByClass(‘checkitem‘)[index].style.borderColor=‘red‘;    
 67                 }
 68             }
 69         })
 70     }
 71     //监听document上的事件
 72     bindEvent(document,‘keyup‘,function(e){
 73         if(e.target.className===‘checkitem‘){
 74             var filtername=e.target.getAttribute(‘filter‘);
 75             obj[filtername]=e.target.value    
 76         }
 77     },false)
 78     for(var i=0; i<eleId.length;i++){
 79         //失去焦点 参数验证
 80         getById(eleId[i]).onblur=function(){
 81             var This=this;
 82             this.value.checkeParams(eleId[i],function(r){
 83                 if(r===0){
 84                     getById(‘check‘).innerhtml=tips[i].nulltip;
 85                 }else if(!r){
 86                     getById(‘check‘).innerHTML=tips[i].checktip;
 87                 }else{
 88                     This.removeAttribute(‘style‘);
 89                 }
 90             })
 91         }
 92     }
 93     //提交按钮 参数验证
 94     getById(‘btn‘).onclick=function(){
 95         var checkitem=getByClass(‘checkitem‘);
 96         for(var i=0;i<checkitem.length;i++){
 97             checkitem[i].removeAttribute(‘style‘)
 98         }
 99         var res=[];
100         var flag;
101         for(var i=0;i<eleId.length;i++){
102             getById(eleId[i]).value.checkeParams(eleId[i],function(r){res.push(r)})
103         }
104         for(var i=0;i<res.length;i++){
105             if(!res[i]){
106                 getById(eleId[i]).focus();
107                 getById(eleId[i]).style.borderColor=‘red‘;
108                 getById(‘check‘).innerHTML=tips[i].errortip;
109                 flag=false;
110                 break;
111             }else{
112                 getById(‘check‘).innerHTML=‘验证全部通过！‘;
113                 flag=true;
114             }
115         }
116         if(flag){
117             opt.fn&&opt.fn();
118         }
119     }
120 }
121 function bindEvent(obj,ev,fn){
122     return window.addEventListener?obj.addEventListener(ev,fn,false):attachEvent(‘on‘+ev,fn)
123 }
124 function getById(id){
125     return document.getElementById(id);
126 }
127 function getByClass(sClass){
128     return document.getElementsByClassName(sClass)
129 }

html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
 5     <meta charset="UTF-8">
 6     <title>参数验证</title>
 7 </head>
 8 <style>
 9 body,ul,li{margin: 0;padding: 0}
10 li{list-style: none;}
11 input {-webkit-appearance:none;}
12 #form{width: 900px;margin: 0 auto;box-sizing: border-box;padding: 10px;}
13 #form li{width: 100%;margin-top: 10px;}
14 #form li div{display: flex;position: relative;}
15 #form li div label {display: block;flex: 1;line-height: 40px;}
16 #form li div input[type=text]{display: block;flex: 5;height: 40px;border: 1px solid #e6e6e6;box-sizing: border-box;outline: none;padding-left: 10px;}
17 #form li label input[type=button]{width: 100%;height: 35px;color: #fff;background-color: #5bdaff;box-sizing: border-box;outline: none;border: none;cursor: pointer;}
18 #form li label input[type=button]:hover {background-color: #06aaff;}
19 @media screen and (max-width: 1020px){#form{width: 100%;}}
20 #check{text-align: center;}
21 </style>
22 <body>
23     <ul id="form" style="height: 100vh">
24         <li class="item">
25             <div class="input-wrap">
26                 <label>用户名</label>
27                 <input type="text" placeholder="输入用户名" id="username" class="checkitem" filter="username">
28             </div>
29         </li>
30         <li class="item">
31             <div class="input-wrap">
32                 <label>密&nbsp;&nbsp;&nbsp;码</label>
33                 <input type="text" placeholder="输入密码" id="password" class="checkitem" filter="password">
34             </div>
35         </li>
36         <li class="item">
37             <div>
38                 <label for="number">正整数</label>
39                 <input type="text" placeholder="输入正整数" id="number" class="checkitem" filter="number">
40             </div>    
41         </li>
42         <li class="item">
43             <div class="input-wrap">
44                 <label>手机号</label>
45                 <input type="text" placeholder="输入手机号" id="phone" class="checkitem" filter="phone">
46             </div>
47         </li>
48         <li class="item">
49             <label>
50                 <input type="button" value="提交" id="btn">
51             </label>
52         </li>
53         <li>
54             <p id="check"></p>
55         </li>
56     </ul>
57 </body>
58 <script src="checkparam.js"></script>
59 <script>
60 //声明一个对象obj,用来存放验证的名称type属性
61 var obj={username:null,password:null,number:null,phone:null}
62 var eleId=[‘username‘,‘password‘,‘number‘,‘phone‘];
63 var tips=[
64 {nulltip:‘用户名不可以为空‘,checktip:‘用户名验证失败‘,errortip:‘用户名验证未通过！‘},
65 {nulltip:‘密码不可以为空‘,checktip:‘密码验证失败‘,errortip:‘密码验证未通过！‘},
66 {nulltip:‘正整数不可以为空‘,checktip:‘正整数验证失败‘,errortip:‘正整数验证未通过！‘},
67 {nulltip:‘手机不可以为空‘,checktip:‘手机验证失败‘,errortip:‘手机验证未通过！‘}
68 ]
69 initCheck({
70     obj:obj,
71     eleId:eleId,
72     tips:tips,
73     fn:function(){
74         console.log(‘验证全部通过,允许请求接口!‘)
75     }
76 });
77 </script>
78 </html>