基于JQuery的前端form表單操作
Jquery的前端表單操作:
jquery提供了良好的方法封裝，在一些基本的操作的時候，能節省很多的麻煩，其中，在具體使用時，form表單的數據提交是最頻繁也最常見的前后數據交換方式，所以在前端對于form表單的處理要解決一些問題（數據的獲取，表單驗證，提交驗證）。
首先介紹幾個方法：
（1） 關于jquery的事件方法：.submit() 表單提交事件
用法一：$ele.submit() 綁定$ele元素，不帶任何參數一般是用來指定觸發一個事件，用的比較少。
例
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函數，這樣可以針對事件的反饋做很多操作了
例
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 });
通過在<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方法介紹：
| 方法名稱： | 介紹（功能） |
| required | 布爾值，true/false，值為true時表示為必填 |
| remote | 遠程校驗，結合ajax，與后端數據比對，使用時以“{}”放置屬性 |
| minlength | 最小長度，輸入數據的長短 |
| maxlength | 最大長度，輸入數據的長短 |
| rangelength | 限制輸入的長度范圍，設置一個區間，輸入值數不能少于或者超出 |
| min | 輸入的數字的最小值限制 |
| max | 輸入的數字的最大值限制 |
| range | 輸入的數字的區間限制 |
| 輸入數據是否符合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>
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 }
浙公網安備 33010602011771號