基於JQuery的前端form表單操做

時間 2019-11-19

原文原文鏈接

Jquery的前端表單操做:javascript

jquery提供了良好的方法封裝，在一些基本的操做的時候，能節省不少的麻煩，其中，在具體使用時，form表單的數據提交是最頻繁也最多見的先後數據交換方式，因此在前端對於form表單的處理要解決一些問題（數據的獲取，表單驗證，提交驗證）。css

首先介紹幾個方法：html

（1）關於jquery的事件方法：.submit() 表單提交事件前端

用法一：$ele.submit() 綁定$ele元素，不帶任何參數通常是用來指定觸發一個事件，用的比較少。java

例jquery

1 <div id="test">點擊觸發<div>
2 $("ele").submit(function(){
3     alert('觸發指定事件')
4 })
5 $("#text").click(function(){
6      $("ele").submit()  //指定觸發事件 
7 });

用法二：$ele.submit( handler(eventObject) ) 綁定$ele元素，每次$ele元素觸發點擊操做會執行回調 handler函數，這樣能夠針對事件的反饋作不少操做了git

例ajax

1 <form id="target" action="destination.html">
2   <input type="submit" value="Go" />
3 </form>
4 $("#target").submit(function() { //綁定提交表單觸發
5     //this指向 from元素 
6 });

用法三：$ele.submit( [eventData ], handler(eventObject) ) 使用與方法二一致，不過能夠接受一個數據參數，這樣的處理是爲了解決不一樣做用域下數據傳遞的問題後端

例：瀏覽器

1 <form id="target" action="destination.html">
2   <input type="submit" value="Go" />
3 </form>
4 $("#target").submit(11111,function(data) { //綁定提交表單觸發
5     //data => 1111 //傳遞的data數據
6 });

View Code

經過在<form>元素上綁定submit事件，開發者能夠監聽到用戶的提交表單的的行爲，通常爲input標籤中type屬性爲submit時觸發。

注意：form元素有默認提交表單的行爲，若是經過submit這個來提交的話，須要事先阻止瀏覽器默認行爲，傳統的js處理方法是調用默認事件阻止方法e.preventDefault()方法來阻止，Jquery中能夠直接在函數中使用 return false 來進行阻止默認事件。通常在用邏輯進行前臺表單限制和檢測無誤後調用return true，否者使用return false以下代碼

1 $("#target").submit(function(data) { 
2    return false; //阻止默認提交行爲
3 });

（2）serialize() 方法序列化表單值

serialize() 方法經過序列化表單值，建立 URL 編碼文本字符串。您能夠選擇一個或多個表單元素（好比 input 及/或文本框），或者 form 元素自己。序列化的值可在生成 AJAX 請求時用於 URL 查詢字符串中。

例:

<form id="forms" action="ajax" method="post">
     <div class="box">
            <table>
             <tr>
               <td>姓名</td>
               <td><input name="username" type="text"></td>
             </tr>
             <tr>
               <td>性別</td>
              <td><input name="sex" type="text"></td>
             </tr>  
             <tr>
               <td>年齡</td>
               <td><input name="age" type="text"></td>
             </tr>  
             <tr>
               <td>手機號</td>
               <td><input name="phone" type="text"></td>
             </tr>    
             <tr><td><button type="submit">提交</button></td></tr>
           </table>   
     </div>
  </form>
  <script type="text/javascript">
     $(function(){
         $("#forms").submit(function(){
             alert($("#forms").serialize());
             return false;
         })
     })
  </script>

JQuery的表單插件（這裏介紹validation Plugin）

首先去官網下載validate的文件包，通常我的編輯只須要 jquery.validete.min.js文件便可，使用時，先引入jquery的配置文件再引入這個文件。

通常客戶端驗證包含兩個有點，第一是減小服務器的壓力，一些數據的合法性所有經過前端進行過濾，不須要後臺額外再寫方法處理，第二就是友好的客戶體驗，配上ajax，可以避免長篇幅的信息輸入提交-駁回-再填寫-再提交的惡性循環。

使用validate以前先介紹其中的兩個概念：

method（驗證方法）：指具體的檢驗邏輯，都被封裝爲獨立的方法，例如email方法就是檢驗輸入的字符是否知足eamil的格式

rule（使用規則）:指元素與驗證方法的關聯，例如指定某個input標籤，須要對它使用哪些具體的方法（上面的method）

validate中的核心方法： valiadate（）

使用格式爲：

<form id="test1">
   <input type="text" name="username" />
</form>
<script>
    var validator1;
    $(document).ready(function () {
      $("#test1").validate({
            rules: {
                username: {
                    required: true,//調用method方法，限制爲必填
                    minlength: 2,
                    maxlength: 10
                }
            },//rules規則,其中 「username」需和input表單中name屬性的值一致
            messages: {
                username: {
                    required: '請輸入用戶名',
                    minlength: '用戶名不能小於2個字符',
                    maxlength: '用戶名不能超過10個字符',
                    remote: '用戶名不存在'
                }
             }//end messages  
        });
    });
</script>

　　主要的method方法介紹：

**method基本方法**
方法名稱：	介紹（功能）
required	布爾值，true/false，值爲true時表示爲必填
remote	遠程校驗，結合ajax，與後端數據比對，使用時以「{}」放置屬性
minlength	最小長度，輸入數據的長短
maxlength	最大長度，輸入數據的長短
rangelength	限制輸入的長度範圍，設置一個區間，輸入值數不能少於或者超出
min	輸入的數字的最小值限制
max	輸入的數字的最大值限制
range	輸入的數字的區間限制
email	輸入數據是否符合email格式
url	輸入的信息是否符合地址（含http：//）
date	輸入的信息是否爲標準的日期格式
dateISO	輸入的信息是否遵循ISO標準
number	輸入的信息必須爲數字
digits	輸入的數字必須爲整數
equalTo	與另外一個元素的值是否相等，用於驗證二次密碼

其中格外介紹一下remote方法和equalTo方法

remote 主要用於與後臺進行瞬間交互，信息的判斷，多用於註冊表單的用戶名防重複處理，採用ajax異步傳輸至後臺，後臺完成數據的判斷。主要格式爲：

username{

                    required: true,
                    minlength: 2,
                    maxlength: 10，
                    remote：「服務器端url地址」     //默認會向後臺發送一個get請求，內容爲 「url？usernmae=value」，返回值只須要是true/false便可，false觸發提示信息，true則不

}

equalTo方法多用於註冊和改密時二次密碼的驗證（即保證兩次輸入相同性）,主要格式爲：

equalTo:"追加要作相同判斷的元素對象"

實例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>jQuery 表單驗證</title>
 6     <link rel="stylesheet" href="css/style.css"/>
 7 </head>
 8 <body>
 9 <form id="demoForm" action="checkTest" method="post">
10     <fieldset>
11         <legend>用戶登陸</legend>
12         <p id="info"></p>
13 
14         <p>
15             <label for="username">用戶名</label>
16             <input type="text" id="username" name="username"/>
17         </p>
18 
19         <p>
20             <label for="password">密碼</label>
21             <input type="password" id="password" name="password"/>
22         </p>
23 
24         <p>
25             <label for="confirm-password">確認密碼</label>
26             <input type="password" id="repassword" name="repassword"/>
27         </p>
28 
29         <p>
30             <input type="submit" value="登陸"/>
31         </p>
32     </fieldset>
33 </form>
34 
35 <script src="Js/jquery.js"></script>
36 <script src="Js/jquery.validate.min.js"></script>
37 <script>
38     var validator1;
39     $(document).ready(function () {
40        $("#demoForm").validate({
41             debug: true,
42             rules: {
43                 username: {
44                     required: true,
45                     minlength: 2,
46                     maxlength: 10
47                 },
48                 password: {
49                     required: true,
50                     minlength: 2,
51                     maxlength: 16
52                 },
53                 repassword: {
54                     equalTo: "#password"
55                 }
56             },
57             messages: {
58                 username: {
59                     required: '請輸入用戶名',
60                     minlength: '用戶名不能小於2個字符',
61                     maxlength: '用戶名不能超過10個字符',
62           
63                 },
64                 password: {
65                     required: '請輸入密碼',
66                     minlength: '密碼不能小於2個字符',
67                     maxlength: '密碼不能超過16個字符'
68                 },
69                 repassword: {
70                     equalTo: "兩次輸入密碼不一致"
71                 }
72 
73             },
74 
75           
76         }); 
77 
78          $("#demoForm").submit(function (data) {
79             console.log(data);
80             if($("#demoForm").valid())//檢驗數據是否出錯
81              {
82                console.log($("#demoForm").valid());
83                $.post("checkTest?"+$("#demoForm").serialize()); 
84              } 
85             else{
86                alert("請確認信息！");
87                return false; 
88            } 
89          }); 
90     });
91 </script>
92 Validation Plugin
93 </body>
94 </html>

View Code

 1 @WebServlet("/checkTest")
 2 public class checkTest extends HttpServlet {
 3     private static final long serialVersionUID = 1L;
 4        
 5     /**
 6      * @see HttpServlet#HttpServlet()
 7      */
 8     public checkTest() {
 9         super();
10         // TODO Auto-generated constructor stub
11     }
12 
13     /**
14      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
15      */
16     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
17         // TODO Auto-generated method stub
18         response.setCharacterEncoding("utf-8");
19         String username = request.getParameter("username");
20         String password = request.getParameter("password");
21         System.out.println(username+password);
22         response.getWriter().print("成功");
23     }
24 
25     /**
26      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
27      */
28     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
29         // TODO Auto-generated method stub
30         doGet(request, response);
31     }
32 
33 }