1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style type="text/css"> 8 body { 9 background: #ccc; 10 } 11 12 label { 13 40px; 14 display: inline-block; 15 } 16 17 span { 18 color: red; 19 } 20 21 .container { 22 margin: 100px auto; 23 400px; 24 padding: 50px; 25 line-height: 40px; 26 border: 1px solid #999; 27 background: #efefef; 28 } 29 30 span { 31 margin-left: 30px; 32 font-size: 12px; 33 } 34 35 .wrong { 36 color: red 37 } 38 39 .right { 40 color: green; 41 } 42 43 .defau { 44 200px; 45 height: 20px; 46 } 47 48 .de1 { 49 background-position: 0 -20px; 50 } 51 </style> 52 <body> 53 <div class="container"> 54 <label>Q Q</label><input type="text" id="inp1"><span></span><br> 55 <label>手机</label><input type="text" id="inp2"><span></span><br> 56 <label>邮箱</label><input type="text" id="inp3"><span></span><br> 57 <label>座机</label><input type="text" id="inp4"><span></span><br> 58 <label>姓名</label><input type="text" id="inp5"><span></span><br> 59 </div> 60 </body> 61 </html> 62 <script> 63 function $(id) { 64 return document.getElementById(id); 65 } 66 67 var inpQQ = $("inp1"); 68 var inpMobile = $("inp2"); 69 var inpEmail = $("inp3"); 70 var inpTel = $("inp4"); 71 var inpName = $("inp5"); 72 function check(inp, regEx) { 73 inp.onblur = function () { 74 if (regEx.test(this.value)) { 75 this.nextSibling.innerHTML = "正确"; 76 this.nextSibling.style.color = "green"; 77 } else { 78 this.nextSibling.innerHTML = "错误"; 79 this.nextSibling.style.color = "red"; 80 } 81 } 82 } 83 84 var regQQ = /^[1-9]d{4,10}$/; 85 var regMobile = /^(13[0-9]|14[57]|15[0-9]|18[0-9])d{8}$/; 86 var regEmail = /^w+([+-.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/; 87 var regTel = /^0d{2,3}-d{7,8}$/; 88 var regName = /^[u4e00-u9fa5]{2,}$/; 89 90 check(inpQQ, regQQ); 91 check(inpMobile, regMobile); 92 check(inpEmail, regEmail); 93 check(inpTel, regTel); 94 check(inpName, regName); 95 96 </script>