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>密 码</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>
验证2
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 span{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 div 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> 26 <span class="item-title">用户名</span> 27 <input type="text" placeholder="输入用户名" id="username" class="checkitem" filter="username"> 28 </div> 29 </li> 30 <li class="item"> 31 <div> 32 <span class="item-title">密 码</span> 33 <input type="text" placeholder="输入密码" id="password" class="checkitem" filter="password"> 34 </div> 35 </li> 36 <li class="item"> 37 <div> 38 <span class="item-title">正整数</span> 39 <input type="text" placeholder="输入正整数" id="number" class="checkitem" filter="number"> 40 </div> 41 </li> 42 <li class="item"> 43 <div> 44 <span class="item-title">手机号</span> 45 <input type="text" placeholder="输入手机号" id="phone" class="checkitem" filter="phone"> 46 </div> 47 </li> 48 <li class="item"> 49 <div> 50 <input type="button" value="提交" id="btn"> 51 </div> 52 </li> 53 <li> 54 <p id="check"></p> 55 </li> 56 </ul> 57 58 </body> 59 <script src="./layui/jquery-1.8.3.min.js"></script> 60 <script src="./layui/layui.js"></script> 61 <script> 62 63 function tip(c,id){ 64 layui.use('layer', function(){ 65 var layer = layui.layer; 66 layer.tips(c, '#'+id,{tips: [4,'#FF5722']}) 67 }); 68 } 69 70 71 72 73 74 75 76 let eleId=['username','password','number','phone']; 77 78 let tips=[ 79 {nulltip:'用户名不可以为空',checktip:'用户名验证失败',errortip:'用户名验证未通过！'}, 80 {nulltip:'密码不可以为空',checktip:'密码验证失败',errortip:'密码验证未通过！'}, 81 {nulltip:'正整数不可以为空',checktip:'正整数验证失败',errortip:'正整数验证未通过！'}, 82 {nulltip:'手机不可以为空',checktip:'手机验证失败',errortip:'手机验证未通过！'} 83 ] 84 85 //为空 || 验证通过 都为true 其他false 可以为空(即为true)需要在验证里修改对应的为空返回true即可 86 87 check({ 88 obj:obj, 89 eleId:eleId, 90 tips:tips, 91 fn:function(){ 92 console.log('验证全部通过,允许请求接口!') 93 } 94 }); 95 96 97 function check(opt){ 98 99 if(!opt.eleId)return; 100 101 102 103 let eleId=opt.eleId; 104 105 let tips=opt.tips; 106 107 let aCheckitem=document.getElementsByClassName('checkitem'); 108 109 //失去焦点 参数验证 110 for(let i=0; i<eleId.length;i++){ 111 112 document.getElementById(eleId[i]).onblur=function(){ 113 114 if(!document.getElementById(eleId[i]).value.checkeParams({type:eleId[i]})){ 115 116 tip(tips[i].errortip,eleId[i]) 117 118 return; 119 120 } 121 122 } 123 124 } 125 126 //提交按钮 参数验证 127 document.getElementById('btn').onclick=function(){ 128 129 let res=[]; 130 131 let flag; 132 133 for(let i=0;i<eleId.length;i++){ 134 135 document.getElementById(eleId[i]).value.checkeParams({type:eleId[i],fn:function(r){res.push(r)}}) 136 137 } 138 139 for(var i=0;i<res.length;i++){ 140 141 if(!res[i]){ 142 143 tip(tips[i].errortip,eleId[i]) 144 145 flag=false; 146 147 break; 148 149 }else{ 150 151 flag=true; 152 153 } 154 155 } 156 if(flag){ 157 158 opt.fn&&opt.fn(); 159 160 } 161 } 162 } 163 164 165 String.prototype.checkeParams=function(opt){ 166 if(!opt)return; 167 let type=opt.type; 168 let fn=opt.fn; 169 switch(type){ 170 //正整数 171 case 'number': 172 let reg=null; 173 if(this.trim().length===0){ 174 fn&&fn(false) 175 return false; 176 }else if(!/^[0-9]+$/.test(this)){ 177 reg=false 178 fn&&fn(false); 179 return false; 180 }else{ 181 if(this.indexOf('.')==-1&&this.indexOf('-')==-1){reg=true}else{reg=false} 182 fn&&fn(reg); 183 return reg; 184 } 185 186 break; 187 //手机号码 188 case 'phone': 189 if(this.trim().length===0){ 190 fn&&fn(false) 191 return false; 192 }else { 193 fn&&fn(/^[1][3,4,5,7,8][0-9]{9}$/.test(this)); 194 return /^[1][3,4,5,7,8][0-9]{9}$/.test(this); 195 } 196 break; 197 //用户名 2-4位中文 198 case 'username': 199 if(this.trim().length===0){ 200 fn&&fn(true) 201 return true; 202 }else{ 203 fn&&fn(/^[\u2E80-\u9FFF]+$/.test(this)&&this.length>1&&this.length<5); 204 return /^[\u2E80-\u9FFF]+$/.test(this)&&this.length>1&&this.length<5; 205 } 206 207 break; 208 //密码 大小写字母和数组的组合 209 case 'password': 210 if(this.trim().length===0){ 211 fn&&fn(false) 212 return false; 213 }else{ 214 fn&&fn(/\w\w{5,17}/.test(this)); 215 return /\w\w{5,17}/.test(this); 216 } 217 break; 218 default: 219 console.warn('you have no type!') 220 break; 221 } 222 } 223 </script> 224 </html>
