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 }