jQuery表單驗證案例

時間 2019-11-12

標籤 jquery 表單驗證案例欄目 JQuery 简体版

原文原文鏈接

目標：使用jQuery進行表單驗證。javascript

功能：1.必填選項後面添加了紅色小星星；html

　　　2.選中開始輸入時，輸入文本框會改變當前背景色，加強用戶體驗；java

　　　3.輸入的時候就開始驗證，當輸入格式正確就會提醒，就是當前還停留在輸入框，或者點擊提交按鈕；app

　　　4.設置重置按鈕，點擊重置，會清除文本框裏面的全部內容。post

截圖：ui

HTML代碼：this

 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 charset=utf-8" />
 5 <title></title>
 6 </head>
 7 <body>
 8 
 9 <form method="post" action="">
10     <div class="int">
11         <label for="username">用戶名:</label>
12         <input type="text" id="username" class="required" />
13     </div>
14     <div class="int">
15         <label for="email">郵箱:</label>
16         <input type="text" id="email" class="required" />
17     </div>
18     <div class="int">
19         <label for="personinfo">我的資料:</label>
20         <input type="text" id="personinfo" />
21     </div>
22     <div class="sub">
23         <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
24     </div>
25 </form>
26 
27 </body>
28 </html>

CSS代碼：url

 1 body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
 2 form div { margin:5px 0;}
 3 .int label { float:left; width:100px; text-align:right;}
 4 .int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
 5 .sub { padding-left:100px;}
 6 .sub input { margin-right:10px; }
 7 .formtips{width: 200px;margin:2px;padding:2px;}
 8 .onError{
 9     background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
10     padding-left:25px;
11 }
12 .onSuccess{
13     background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
14     padding-left:25px;
15 }
16 .high{
17     color:red;
18 }
19 
20 .focus { 
21      border: 1px solid #f00;
22      background: #fcc;
23 }

Jquery代碼：spa

 1 <script type="text/javascript">
 3 $(function(){
 4     
 5 
 6     //2.若是是必填的，則加紅星標識.
 7     $("form :input.required").each(function(){
 8         var $required = $("<strong class='high'> *</strong>"); //建立元素
 9         $(this).parent().append($required); //而後將它追加到文檔中
10     });
11 
12 
13          //3.文本框失去焦點後開始驗證
14         $('form :input').blur(function(){
15          var $parent = $(this).parent();
16          $parent.find(".formtips").remove();
17 
18 
19          //3.1驗證用戶名
20          if( $(this).is('#username') ){
21                 if( this.value=="" || this.value.length < 6 ){
22                 var errorMsg = '請輸入至少6位的用戶名.';
23                             $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
24                 }else{
25                 var okMsg = '輸入正確.';
26                 $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
27                 }
28          }
29 
30          //3.2驗證郵件
31          if( $(this).is('#email') ){
32             if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
33                   var errorMsg = '請輸入正確的E-Mail地址.';
34                   $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
35             }else{
36                   var okMsg = '輸入正確.';
37                   $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
38             }
39          }
40 
41          //3.3實現一邊輸入一邊驗證
42     }).keyup(function(){
43         $(this).triggerHandler("blur");
44     }).focus(function(){
45           $(this).triggerHandler("blur");
46         });//end blur
47 
48         
49         //3.4提交，最終驗證。
50         $('#send').click(function(){
51             $("form :input.required").trigger('blur');
52             var numError = $('form .onError').length;
53             if(numError){
54                 return false;
55             } 
56             alert("註冊成功,密碼已發到你的郵箱,請查收.");
57         });
58 
59         //4.重置
60          $('#res').click(function(){
61             $(".formtips").remove(); 
62          });
63 
64          //1.選中輸入的時候輸入框變色
65         $(":input").focus(function(){
66             $(this).addClass("focus");
67         }).blur(function(){
68             $(this).removeClass("focus");
69         });
70 
71 
72 })
73 
74 </script>

此案例是基於jQuery1.7，因此須要額外引入jQuery.code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。