HTML5 web Form表单验证实例

浏览数：57 / 时间：2015年06月09日

HTML5 web Form 的开发实例！

index.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>HTML5表单验证</title>
 6     <link rel="stylesheet" type="text/css" href="../css/style.css">
 7     <link rel="stylesheet" type="text/css" href="../css/test.css">
 8     <script type="text/javascript" src="../js/test.js"></script>    
 9 </head>
10 <body>
11 <div id="content">
12     <header>
13         <h2>HTML5 Web Form</h2>    
14     </header>
15     <section>
16             <form method="post" action="" name="myform" class="form" >
17                 <label for="user_name">真实姓名<br/></label>
18                 <input id="user_name" type="text" name="user_name" required pattern="^([\u4e00-\u9fa5]+|([a-z]+\s?)+)$" /><br/>
19 
20                 <label for="user_item">比赛项目<br/></label>
21                 <input list="ball" id="user_item" type="text" name="user_item" required/><br/>
22                 <datalist id="ball">
23                     <option value="篮球"/>
24                     <option value="羽毛球"/>
25                     <option value="桌球"/>
26                 </datalist>
27 
28                 <label for="user_email">电子邮箱<br/></label>
29                 <input id="user_email" type="email" name="user_email" pattern="^[0-9a-z][a-z0-9\._-]{1,}@[a-z0-9-]{1,}[a-z0-9]\.[a-z\.]{1,}[a-z]$"  required /><br/>
30 
31                 <label for="user_phone">手机号码<br/></label>
32                 <input id="user_phone" type="telephone" name="user_phone" pattern="^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$" required/><br/>
33 
34 
35                 <label for="user_id">身份证号</label><br/>
36                 <input id="user_id" type="text" name="user_id" required pattern="^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$" /><br/>
37 
38                 <label for="user_born">出生年月</label><br/>
39                 <input id="user_born" type="month" name="user_born" required /></span><br/>
40 
41                 <label for="user_rank">名次期望</label>
42                 <span>第<em  id="ranknum">5</em>名</span><br/>
43                 <input id="user_rank" type="range" name="user_rank" value="5" min="1" max="10" step="1" required /><br/>
44 
45                 <button type="submit" name="submit" value="提交表单">提交表单</button>
46             </form>            
47     </section>
48     <footer><em>Designed by Wang LeHui.</em></footer>
49     </div>
50 </body>
51 </html>

style.css

 1 #content{    
 2     margin:0 auto;
 3     width:350px;
 4 }
 5 .form{
 6     padding: 20px;
 7     border:1px solid #bbb;
 8     -moz-border-shadow:0 0 10px #bbb;
 9     -webkit-border-shadow:0 0 10px #bbb;
10     shadow:0 0 10px #bbb;
11 }
12 label+span{
13     color: #FF0000;
14 }
15 .form input,button{
16     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
17     background-color: #fff;
18     border:1px solid #ccc;
19     font-size: 15px;
20     width: 250px;
21     min-height: 30px;
22     display: block;
23     margin-bottom: 5px;
24     margin-top: 5px;
25     -webkit-border-radius:5px;
26     -moz-border-radius:5px;
27     border-radius: 5px;
28     -webkit-transition:all 0.5s ease-in-out;
29     -moz-transition:all 0.5s ease-in-out;
30     transition:all 0.5s ease-in-out;
31 }
32 .form input:focus,button:focus{
33     background-color: #fff;
34      -moz-border-shadow:0 0 20px #ccc;
35     -webkit-border-shadow:0 0 20px #ccc;
36     shadow:0 0 20px #ccc;
37     -webkit-transform:scale(1.05);
38     -moz-transform:scale(1.05);
39     transform:scale(1.05);
40  } 
41 button[type=submit]{
42     background-color: #fff;
43     display: inline-block;
44     padding:5px 10px 6px 10px;
45     font-weight: bold;
46     border:1px solid #888;
47     border-radius:5px;
48     -moz-border-radius:5px;
49     -moz-border-shadow:0 0 3px #888;
50     -webkit_box_shadow:0 0 3px #888;
51     box-shadow: 0 0 3px #888;
52     opacity: 1.0;
53 }
54 button[type=submit]:hover{
55     background-color: #fff;
56     opacity: 1.0;
57     color:#516527;
58     cursor: hand;
59     cursor: pointer;
60 }

技术分享

test.css

1 .form input:valid{
2     background:url("../images/right1.png") no-repeat 210px 1px;
3 }
4 
5 .form input:focus:invalid{
6     background:url("../images/error1.png") no-repeat 210px 0px;
7 };

test.js

 1 var rank;
 2 var ranknum;
 3 var user_name;
 4 var user_item;
 5 var user_email;
 6 var email_validityState;
 7 
 8 function load(){
 9     rank = document.myform.user_rank;
10     ranknum = document.getElementById(‘ranknum‘);
11     rank.addEventListener("change",changerank,false);
12 
13     user_name = document.getElementById(‘user_name‘);
14     user_name.addEventListener("change",checkname,false);
15 
16     user_item = document.getElementById("user_item");
17     user_item.addEventListener("change",checkitem,false);
18 }
19 function changerank(){
20     ranknum.innerHTML = rank.value;
21 }
22 function checkname(){
23     if (isname(user_name.value)==null) {
24         user_name.setCustomValidity("请输入真实的中文名字！");
25         user_name.validationMessage;
26     }
27     else{
28         user_name.setCustomValidity("");
29     }
30 }
31 function isname(str){
32     var reg = /^[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*$/;
33     return reg.exec(str);
34 }
35 
36 function checkitem(){
37     if(isitem(user_item.value)==null){
38         user_item.setCustomValidity("请正确选择比赛项目！");
39         user_item.validationMessage;
40     }
41     else{
42         user_item.setCustomValidity("");
43     }
44 }
45 function isitem(str){
46     if (!(str=="篮球"||str=="桌球"||str=="羽毛球")) {
47         return null;
48     }
49     else {
50         return 0;
51     }
52 }
53 window.addEventListener("load",load,false);