form_validate 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>CSS&JS---Form validate</title>
 6     <style rel="stylesheet">
 7         body,div,p,span,ul,li, input, textarea {color:#B8B8B8; font: 14px/22px "微软雅黑", Arial;margin:0; padding:0;}
 8         textarea, input {outline:none; resize:none; background: #e0e0e0; color:#6E4E22;}
 9         .wrapper {position:relative; overflow:hidden; width:350px; height:350px; margin:0 auto; border-radius: 50%; box-shadow: inset 0 0 20px #64516B;}
10         fieldset {width:60%; margin:80px auto 0; border-radius: 10px; box-shadow: inset 0 0 6px rgba(0, 255, 0, 0.2); padding:16px; border:0;}
11         label, legend {font-weight: bold; color:#fff; margin:0 12px 0 0;}
12         input {border-radius: 4px; height: 22px; border:1px solid #ccc; margin:5px 0; padding:5px;}
13         .bt_bin {width:60px; height: 32px; margin:12px 0 0 40px; color:#64516B; font-size:15px; font-weight: bold; cursor:pointer;}
14         .blue_v {position:absolute; left:0; top:0; width:14%; height:100%; background: #00f; opacity:0.2; filter:alpha(opacity=20);}
15         .blue_h {
16             position:absolute;
17             top:30%;
18             right:0;
19             width:0;
20             height: 0;
21             border-width: 70px 20px 70px 0;
22             border-color: transparent;
23             border-style:solid;
24             border-right-color:#f00;
25             opacity:0.3;
26             filter:alpha(opacity=30);
27         }
28     </style>
29     <script type="text/javascript">
30         function check() {
31             var age = document.form1.age.value;
32             var username = document.form1.username.value;
33             var num = /^\d+$/gi;
34             var regname =  /^[\u4e00-\u9fa5]+$/gi; //“\u4e00-\u9fa5”表示unicode编码中中文字符的范围
35             var z = age.length-1;
36 
37             if (!regname.test(username) || username.length < 2) {
38                 alert("亲，请正确输入你的姓名！");
39                 form1.username.focus();
40                 return false;
41             }
42 
43 
44             if (!num.test(age)) {
45                 alert("亲，请正确填写你的年龄！");
46                 form1.age.focus();
47                 return false;
48             }
49             else if (age > 200 || age < 0) {
50                 alert("这个年纪的你还是远离网络比较好！");
51                 form1.age.focus();
52                 return false;
53 
54                 }
55             document.form1.submit();
56         }
57     </script>
58 </head>
59 
60 <body bgcolor="#000">
61 <div class="wrapper">
62     <form method="post" action="https://github.com/jeanleem6" name="form1" id="form1">
63         <fieldset>
64         <legend>JS Validate</legend>
65         <label>姓名</label><input type="text" name="username" /><br />
66         <label>年龄</label><input type="text" name="age" /><br />
67         <input type="button" class="bt_bin" name="bt_send" value="提交" onclick="javascript:check();" />
68         <input type="reset" class="bt_bin" name="bt_reset" value="重置" />
69         </fieldset>
70     </form><!-- #form1 end -->
71 
72     <div class="blue_v"></div>
73     <div class="blue_h"></div>
74 </div>
75 </body>
76 </html>

 

posted @ 2013-06-15 12:35  云端漂移  阅读(163)  评论(0)    收藏  举报