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