登录注册信息检查
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Check</title> 7 </head> 8 <style> 9 label{ 10 width:80px; 11 display:block; 12 float: left; 13 } 14 </style> 15 <body> 16 <form action=""> 17 <label for="user">账号</label><input type="text" id='user'> 18 <br><br> 19 <label for="pw">密码</label><input type="password" name="" id="pw"> 20 <br><br> 21 <label for="rpw">确认密码</label><input type="password" name="" id="rpw"> 22 <br><br> 23 <label for="email">邮箱</label><input type="text" name="" id="email"> 24 <br><br> 25 <label for="tel">手机号</label><input type="text" name="" id="tel"> 26 27 </form> 28 <script src="./class/Ele.class.js"></script> 29 <script src="./class/strPlay.class.js"></script> 30 <script> 31 var e=new Ele(); 32 33 class Check{ 34 constructor(){ 35 // 实例化一个元素工具类 36 this.e=new Ele(); 37 } 38 // 账号检查 39 username(ostr){ 40 let obj=this.find(ostr); 41 obj.addEventListener('input',()=>{},true); 42 obj.addEventListener('blur',()=>{ 43 let vs=new StrPlay(obj.value); 44 // 去空格 45 vs=vs.space(); 46 if(vs.length<6) 47 { 48 // 用户名不符合要求时生成提示信息,结束程序 49 return this.errAlter(obj,"用户名不能小于6字符"); 50 } 51 else{ 52 this.errMove(obj); 53 } 54 obj.value=vs; 55 // 字符检查 56 //vs.space().check(/\w/g); 57 },true); 58 obj.addEventListener('focus',()=>{},true); 59 return obj.value; 60 } 61 // 密码检查 62 password(ostr){ 63 let obj=this.find(ostr); 64 obj.addEventListener('keypress',(event)=>{ 65 if(event.keyCode==32) 66 { 67 this.errAlter(obj,"密码不能包含空格"); 68 } 69 },true); 70 obj.addEventListener('blur',()=>{ 71 let vs=new StrPlay(obj.value); 72 if(vs.check(/\s/g).join('')) 73 { 74 return this.errAlter(obj,"密码不能包含空格"); 75 } 76 else{ 77 this.errMove(obj); 78 } 79 if(vs.length<6) 80 { 81 return this.errAlter(obj,"密码不能小于6字符"); 82 } 83 else{ 84 this.errMove(obj); 85 } 86 },true); 87 return obj.value; 88 } 89 //密码确认 对比检查 90 repassword(rostr,ostr){ 91 let robj=this.find(rostr); 92 let obj=this.find(ostr); 93 robj.addEventListener('blur',()=>{ 94 if(robj.value!=obj.value) 95 { 96 return this.errAlter(robj,"密码不一致,请重新输入"); 97 } 98 else{ 99 this.errMove(robj); 100 } 101 },true); 102 } 103 // 邮箱格式检查 104 email(ostr){ 105 let obj=this.find(ostr); 106 obj.addEventListener('blur',()=>{ 107 let pstr=new StrPlay(obj.value).check(/\w+@\w+\.\w+/g); 108 if(pstr && pstr.length==1 && pstr.join("")==obj.value) 109 { 110 this.errMove(obj); 111 } 112 else{ 113 return this.errAlter(obj,"邮箱格式不合法！"); 114 } 115 },true); 116 return obj.value; 117 } 118 // 手机号检查 119 tel(ostr){ 120 let obj=this.find(ostr); 121 obj.addEventListener('blur',()=>{ 122 let vs=new StrPlay(obj.value); 123 if(obj.value.length!=11) 124 { 125 return this.errAlter(obj,"手机号码格式错误"); 126 } 127 else{ 128 this.errMove(obj); 129 } 130 let tstr=vs.check(/\d+/g).join(""); 131 if(vs.check(/1[3|5|8]\d{9}/g).join(""==obj.value)) 132 { 133 this.errMove(obj); 134 } 135 else{ 136 return this.errAlter(obj,"手机号码格式错误"); 137 } 138 console.log(tstr); 139 },true); 140 return obj.value; 141 } 142 find(str){ 143 return document.getElementById(str); 144 } 145 // 生成警告元素添加 146 errAlter(obj,str){ 147 let co=obj.nextSibling.className; 148 if(co && co.indexOf('errAlter')!=-1) 149 { 150 obj.nextSibling.innerText=str; 151 } 152 else{ 153 // 警告元素创建 154 let errStr=this.e.createEle({ 155 "tag":"span", 156 "attrs":{ 157 "style":"color:#f00;margin-left:20px;font-size:12px;", 158 'class':"errAlter" 159 }, 160 "text":str 161 }) 162 // 警告元素位置设置 163 this.e.insertAfter(errStr,obj); 164 } 165 return false; 166 } 167 // 取消警告元素 168 errMove(obj){ 169 let co=obj.nextSibling.className; 170 if(co && co.indexOf('errAlter')!=-1) 171 { 172 this.e.removeEle(obj.nextSibling) 173 } 174 } 175 } 176 177 var o=new Check(); 178 o.username('user'); 179 o.password('pw'); 180 o.repassword('rpw','pw'); 181 o.email('email'); 182 o.tel('tel'); 183 </script> 184 </body> 185 </html>
Ele.class.js 链接地址：https://www.cnblogs.com/huangcaijin/p/13051204.html
StrPlay.class.js 链接地址:https://www.cnblogs.com/huangcaijin/p/12841763.html
