表单验证

 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>