jquery表单验证

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title></title>
 6 <link href="css/style.css" rel="stylesheet" type="text/css" />
 7 <!--   引入jQuery -->
 8 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 9 <script type="text/javascript">
10 //<![CDATA[
11 $(function(){
12   //如果是必填的，则加红星标识.
13   $("form :input.required").each(function(){
14    var $required = $("<strong class='high'> *</strong>"); //创建元素
15    $(this).parent().append($required); //然后将它追加到文档中
16   });
17          //文本框失去焦点后
18      $('form :input').blur(function(){
19     var $parent = $(this).parent();
20     $parent.find(".formtips").remove();
21     //验证用户名
22     if( $(this).is('#username') ){
23      if( this.value=="" || this.value.length < 6 ){
24          var errorMsg = '请输入至少6位的用户名.';
25                         $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
26      }else{
27          var okMsg = '输入正确.';
28          $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
29      }
30     }
31     //验证邮件
32     if( $(this).is('#email') ){
33     if( this.value=="" || ( this.value!="" && ) ) ){
34                       var errorMsg = '请输入正确的E-Mail地址.';
35        $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
36     }else{
37                       var okMsg = '输入正确.';
38        $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
39     }
40     }
41   }).keyup(function(){
42      $(this).triggerHandler("blur");
43   }).focus(function(){
44        $(this).triggerHandler("blur");
45   });//end blur
46 
47   
48   //提交，最终验证。
49    $('#send').click(function(){
50     $("form :input.required").trigger('blur');
51     var numError = $('form .onError').length;
52     if(numError){
53      return false;
54     } 
55     alert("注册成功,密码已发到你的邮箱,请查收.");
56    });
57 
58   //重置
59    $('#res').click(function(){
60     $(".formtips").remove(); 
61    });
62 })
63 //]]>
64 </script>
65 </head>
66 <body>
67 
68 <form method="post" action="">
69  <div class="int">
70   <label for="username">用户名:</label>
71   <input type="text" id="username" class="required" />
72  </div>
73  <div class="int">
74   <label for="email">邮箱:</label>
75   <input type="text" id="email" class="required" />
76  </div>
77  <div class="int">
78   <label for="personinfo">个人资料:</label>
79   <input type="text" id="personinfo" />
80  </div>
81  <div class="sub">
82   <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
83  </div>
84 </form>
85 
86 </body>
87 </html>

 

posted @ 2018-08-13 18:27  往事随风_go  阅读(125)  评论(0)    收藏  举报