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 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style media="screen"> 9 body { 10 background: #ccc; 11 } 12 label { 13 width: 40px; 14 display: inline-block; 15 } 16 .container { 17 margin: 100px auto; 18 width: 400px; 19 padding: 50px; 20 line-height: 40px; 21 border: 1px solid #777; 22 background: #efefef; 23 } 24 span { 25 margin-left: 25px; 26 font-size: 12px; 27 padding: 2px 20px 0; 28 color: #ccc; 29 } 30 .right { 31 color: green; 32 background: url(images/right.png) no-repeat; 33 } 34 .wrong { 35 color: red; 36 background: url(images/wrong.png) no-repeat; 37 } 38 .pwd { 39 width: 220px; 40 height: 20px; 41 background: url(images/strong.jpg) no-repeat; 42 } 43 .str1 { 44 background-position: 0 -20px; 45 } 46 .str2 { 47 background-position: 0 -40px; 48 } 49 .str3 { 50 background-position: 0 -60px; 51 } 52 .str4 { 53 background-position: 0 -80px; 54 } 55 </style> 56 </head> 57 <body> 58 <div class="container"> 59 <label for="inp1">QQ</label><input type="text" name="" id="inp1"><span>输入正确的QQ号码</span><br> 60 <label for="inp2">手机</label><input type="text" name="" id="inp2"><span>输入13位手机号</span><br> 61 <label for="inp3">邮箱</label><input type="text" name="" id="inp3"><span>输入正确邮箱</span><br> 62 <label for="inp4">座机</label><input type="text" name="" id="inp4"><span>输入您的座机</span><br> 63 <label for="inp5">账号</label><input type="text" name="" id="inp5"><span>亲输入您的账号</span><br> 64 <label for="inp6">密码</label><input type="text" name="" id="inp6"><span>请输入您的密码</span><br> 65 <div id="password" class="pwd"></div> 66 </div> 67 68 <script type="text/javascript"> 69 var password = document.getElementById("password"); 70 71 //qq号 72 addEvent("inp1",function(){ 73 if (/^[1-9][0-9]{4,}$/.test(this.value)) { 74 setClassInner(this,"right","恭喜您,输入正确!"); 75 }else { 76 setClassInner(this,"wrong","格式错误!"); 77 } 78 }); 79 80 //手机号 81 addEvent("inp2",function(){ 82 if (/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/.test(this.value)) { 83 setClassInner(this,"right","恭喜您,输入正确!"); 84 }else { 85 setClassInner(this,"wrong","格式错误!"); 86 } 87 }); 88 89 //邮箱 90 addEvent("inp3",function(){ 91 if (/^[\w\-\.]{5,}\@[\w]+\.[\w]{2,4}$/.test(this.value)) { 92 setClassInner(this,"right","恭喜您,输入正确!"); 93 }else { 94 setClassInner(this,"wrong","格式错误!"); 95 } 96 }); 97 98 //座机 99 addEvent("inp4",function(){ 100 if (/(^0\d{2}-8\d{7}$)|(^0\d{3}-3\d{6}$)/.test(this.value)) { 101 setClassInner(this,"right","恭喜您,输入正确!"); 102 }else { 103 setClassInner(this,"wrong","格式错误!"); 104 } 105 }); 106 107 //账号 108 addEvent("inp5",function(){ 109 if (/^[a-zA-Z0-9_-]{3,16}$/.test(this.value)) { 110 setClassInner(this,"right","恭喜您,输入正确!"); 111 }else { 112 setClassInner(this,"wrong","格式错误!"); 113 } 114 }); 115 116 //密码 117 addEvent("inp6",function(){ 118 if (/^[a-zA-Z0-9_\-$]{6,18}$/.test(this.value)) { 119 setClassInner(this,"right","恭喜您,输入正确!"); 120 password.className = "pwd str1"; 121 //只有密码通过了,才能执行密码强度测试 122 //从大往小判断 123 if (/^[A-Za-z0-9]+[_$][A-Za-z0-9]*$/.test(this.value)) { 124 password.className = "pwd str4"; 125 }else if (/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/.test(this.value)) { 126 password.className = "pwd str3"; 127 }else if (/^([a-z].*[A-Z])|([A-Z].*[a-z])$/.test(this.value)) { 128 password.className = "pwd str2"; 129 } 130 }else { 131 setClassInner(this,"wrong","格式错误!"); 132 } 133 }); 134 135 //封装重复代码 136 function addEvent(str,fn){ 137 document.getElementById(str).onblur = fn; 138 } 139 function setClassInner(aaa,rw,txt){ 140 var span = aaa.nextElementSibling || aaa.nextSibling; 141 span.className = rw; 142 span.innerHTML = txt; 143 } 144 </script> 145 </body> 146 </html>
原文地址:https://www.cnblogs.com/knuzy/p/8893517.html
时间: 2024-08-30 05:55:00