基于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 });

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 }

View Code