參數驗證
阿新 • • 發佈：2018-06-07
fff 名稱 輸入密碼 style 小寫字母 一個 lock col outline
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>
參數驗證