jQuery对表单的操作
表单应用
-
一个表单有3个基本组成部分：
表单标签：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法
表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等
表单按钮：包括提交按钮、复位按钮和一般按钮。用于将数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。
（本次主要讲解jQuery在表单域中的应用）
- 单行文本框：单行文本框是表单域中最基本的元素，这次介绍——获取和失去焦点改变样式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 5 <script type="text/javascript" src="../js/jquery-3.1.0.min.js"></script> 6 <title>表单应用--单行文本框</title> 7 <style type="text/css"> 8 /*伪类 :focus IE6不支持除超链接元素之外的伪类选择器*/ 9 /*input:focus,textarea:focus{ 10 border: 1px solid #FF0000; 11 background: #CCCCCC; 12 }*/ 13 14 /*添加.focus样式*/ 15 .focus{ 16 border: 1px solid #FF0000; 17 background: #CCCCCC; 18 } 19 </style> 20 </head> 21 <body> 22 <!--单行文本框应用--> 23 <form action="#" method="post" id="regFrom"> 24 <fieldset> 25 <legend>个人基本信息</legend> 26 <div> 27 <label for="username">名称：</label> 28 <input id="username" type="text"/> 29 </div> 30 <div> 31 <label for="password">密码：</label> 32 <input id="password" type="password"/> 33 </div> 34 <div> 35 <label for="msg">详细信息：</label> 36 <textarea id="msg"></textarea> 37 </div> 38 </fieldset> 39 </form> 40 41 <script type="text/javascript"> 42 $(function(){ 43 //单行文本框应用 44 $(":input").focus(function(){ //添加获取焦点事件 45 $(this).addClass("focus"); 46 }).blur(function(){ //失去焦点事件 47 $(this).removeClass("focus"); 48 }) 49 }) 50 </script> 51 </body> 52 </html>
以上代码显示的结果是：文本框获取焦点后，边框颜色改变为红色，背景颜色为灰色；失去焦点后变为原来样式
网页效果为：
2.多行文本框：这里主要是对某评论框高度进行设置
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 5 <script type="text/javascript" src="../js/jquery-3.1.0.min.js"></script> 6 <title>表单应用--多行文本框--高度设置</title> 7 </head> 8 <body> 9 <form> 10 <div class="msg"> 11 <div class="msg_caption"> 12 <span class="bigger">放大</span> 13 <span class="smaller">缩小</span> 14 </div> 15 <div> 16 <textarea id="comment" rows="8" cols="20">多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。</textarea> 17 </div> 18 </div> 19 </form> 20 21 <script type="text/javascript"> 22 $(function(){ 23 //高度设置 24 25 //单机“放大”按钮，如果评论框高度小于500，就在原有高度基础上加50；单机“缩小”按钮，如果评论框高度大于50，就在原有高度基础上减50； 26 var $comment = $(\'#comment\'); //获取评论框 27 $(\'.bigger\').click(function(){ //“放大”按钮绑定单机事件 28 if($comment.height() < 500){ 29 //这里有可有两种写法 30 //第一种 31 //重新设置高度，在原有的基础上加50 32 // $comment.height($comment.height() + 50); 33 34 //第二种 35 //使用自定义动画animate()方法，让高度在0.4秒内增大50px 36 $comment.animate({height:"+=50"},400); 37 } 38 }); 39 $(\'.smaller\').click(function(){ //“放大”按钮绑定单机事件 40 if($comment.height() > 50){ 41 //这里有可有两种写法 42 //第一种 43 //重新设置高度，在原有的基础上减50 44 // $comment.height($comment.height() - 50); 45 46 //第二种 47 //使用自定义动画animate()方法，让高度在0.4秒内缩小50px 48 $comment.animate({height:"-=50"},400); 49 } 50 }) 51 }) 52 </script> 53 </body> 54 </html>
以上代码显示的结果是：单机“放大”按钮，如果评论框高度小于500，就在原有高度基础上加50；单机“缩小”按钮，如果评论框高度大于50，就在原有高度基础上减50；
网页效果为：
3.复选应用框：对复选框进行，全选、反选、和全不选等操作。需要与选项挂钩，来达到各种联级反应
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 5 <script type="text/javascript" src="../js/jquery-3.1.0.min.js"></script> 6 <title>表单应用--多行文本框--复选框应用</title> 7 </head> 8 <body> 9 <form> 10 你爱好的运动是？<!--<br />--> 11 <input type="checkbox" id="CheckedAll" />全选/全不选<br /> 12 <input type="checkbox" name="items" value="足球" />足球 13 <input type="checkbox" name="items" value="篮球" />篮球 14 <input type="checkbox" name="items" value="羽毛球" />羽毛球 15 <input type="checkbox" name="items" value="橄榄球" />橄榄球<br /> 16 <!--<input type="button" id="CheckedAll" value="全 选" /> 17 <input type="button" id="CheckedNo" value="全不 选" />--> 18 <input type="button" id="CheckedRev" value="反 选" /> 19 <input type="button" id="send" value="提 交" /> 20 </form> 21 22 <script type="text/javascript"> 23 $(function(){ 24 25 //反选 26 //循环每一个复选框进行设置，取他们的反值；是true，就设置为false；是false，就设置为true 27 //可使用非运算符“!” 28 $("#CheckedRev").click(function(){ 29 $(\'[name=items]:checkbox\').each(function(){ 30 this.checked = !this.checked; 31 }) 32 }) 33 34 //提交 35 //输出选中的项 36 $("#send").click(function(){ 37 var str = "你选中的是：\r\n"; 38 $(\'[name=items]:checkbox:checked\').each(function(){ 39 str += $(this).val()+"\r\n"; 40 }); 41 alert(str); 42 }) 43 44 //全选/全不选 45 $("#CheckedAll").click(function(){ 46 if(this.checked){ //如果当前单机的复选框被选中 47 $(\'[name=items]:checkbox\').attr(\'checked\',true); 48 }else{ 49 $(\'[name=items]:checkbox\').attr(\'checked\',false); 50 } 51 }) 52 53 }) 54 </script> 55 </body> 56 </html>
网页效果：这里网页效果显示需要手动操作才能清楚的看到效果，可以粘贴代码到自己的项目中进行展示
4.下拉框应用：在网页上增加两个下拉框，分别加上两个按钮，进行添加删除
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 5 <script type="text/javascript" src="../js/jquery-3.1.0.min.js"></script> 6 <title>表单应用--多行文本框--下拉框应用</title> 7 </head> 8 <body> 9 <div class="centent"> 10 <select multiple id="select1" style="width: 100px;height: 160px;"> 11 <option value="1">选项1</option> 12 <option value="2">选项2</option> 13 <option value="3">选项3</option> 14 <option value="4">选项4</option> 15 <option value="5">选项5</option> 16 <option value="6">选项6</option> 17 <option value="7">选项7</option> 18 <option value="8">选项8</option> 19 </select> 20 <div> 21 <span id="add">选中添加到右边>></span> 22 23 </div> 24 <div> 25 <span id="add_all">全部添加到右边>></span> 26 </div> 27 </div> 28 <div class="centent"> 29 <select multiple id="select2" style="width: 100px;height: 160px;"> 30 31 </select> 32 <div> 33 <span id="del"><<选中删除到左边</span> 34 35 </div> 36 <div> 37 <span id="del_all"><<全部删除到左边</span> 38 </div> 39 </div> 40 41 <script type="text/javascript"> 42 $(function(){ 43 //将左边的选中项添加到右边 44 $(\'#add\').click(function(){ 45 var $options = $(\'#select1 option:selected\'); 46 // var $remove = $options.remove(); 47 // $remove.appendTo(\'#select2\'); 48 $options.appendTo(\'#select2\'); 49 }); 50 //将右边的选中项添加到左边 51 $(\'#del\').click(function(){ 52 var $options = $(\'#select2 option:selected\'); 53 54 //复杂写法 55 // var $remove = $options.remove(); 56 // $remove.appendTo(\'#select1\'); 57 58 //简单写法 59 $options.appendTo(\'#select1\'); 60 }); 61 62 //双击左边选项添加到对方 63 $(\'#select1\').dblclick(function(){ 64 var $options = $(\'option:selected\',this); 65 $options.appendTo(\'#select2\'); 66 }) 67 //双击右边选项添加到对方 68 $(\'#select2\').dblclick(function(){ 69 var $options = $(\'option:selected\',this); 70 $options.appendTo(\'#select1\'); 71 }) 72 73 //将左边全部选项添加给对方 74 $(\'#add_all\').click(function(){ 75 var $options = $(\'#select1 option\'); 76 $options.appendTo(\'#select2\'); 77 }) 78 //将右边全部选项添加给对方 79 $(\'#del_all\').click(function(){ 80 var $options = $(\'#select2 option\'); 81 $options.appendTo(\'#select1\'); 82 }) 83 }) 84 </script> 85 </body> 86 </html>
网页效果：这里就不在一一展示网页效果显示了，如果需要，可以粘贴代码到自己的项目中进行展示
5.表单验证：表单作为HTML最重要的一个组成部分，几乎在每个网页上都有体现，例如：用户提交信息。对此来进行简单验证
1 <!DOCTYPE html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <script src="../js/jquery-3.1.0.min.js" type="text/javascript"></script> 5 <title>表单应用--多行文本框--表单验证</title> 6 </head> 7 <body> 8 <form method="post" action=""> 9 <div class="int"> 10 <label for="username"> 11 用户名:</label> 12 <input type="text" id="username" class="required" /> 13 </div> 14 <div class="int"> 15 <label for="email"> 16 邮箱:</label> 17 <input type="text" id="email" class="required" /> 18 </div> 19 <div class="int"> 20 <label for="personinfo"> 21 个人资料:</label> 22 <input type="text" id="personinfo" /> 23 </div> 24 <div class="sub"> 25 <input type="submit" value="提交" id="send" /><input type="reset" id="res" /> 26 </div> 27 </form> 28 29 <script type="text/javascript"> 30 $(function () { 31 //如果是必填的，则加红星标识. 32 $("form :input.required").each(function () { 33 var $required = $("<strong class=\'high\'> *</strong>"); //创建元素 34 $(this).parent().append($required); //然后将它追加到文档中 35 }); 36 37 //文本框失去焦点后 38 $(\'form :input\').blur(function () { //为表单添加失去焦点事件 39 var $parent = $(this).parent(); 40 $parent.find(".formtips").remove(); //删除以前的提醒元素 41 42 //验证用户名 43 if ($(this).is(\'#username\')) { 44 if (this.value == "" || this.value.length < 6) { //用if进行判断，用户名长度是否小于6 45 var errorMsg = \'请输入至少6位的用户名.\'; 46 $parent.append(\'<span class="formtips onError">\' + errorMsg + \'</span>\'); 47 } else { 48 var okMsg = \'输入正确.\'; 49 $parent.append(\'<span class="formtips onSuccess">\' + okMsg + \'</span>\'); 50 } 51 } 52 //验证邮件 53 if ($(this).is(\'#email\')) { 54 if (this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) { //用if进行判断，邮箱格式是否符合 55 var errorMsg = \'请输入正确的E-Mail地址.\'; 56 $parent.append(\'<span class="formtips onError">\' + errorMsg + \'</span>\'); 57 } else { 58 var okMsg = \'输入正确.\'; 59 $parent.append(\'<span class="formtips onSuccess">\' + okMsg + \'</span>\'); 60 } 61 } 62 }).keyup(function () { //用户每次松开按键时触发 63 $(this).triggerHandler("blur"); 64 }).focus(function () { //用户得到焦点时触发 65 $(this).triggerHandler("blur"); 66 }); //end blur 67 68 69 //提交，最终验证。 70 $(\'#send\').click(function () { //为提交按钮绑定click事件 71 $("form :input.required").trigger(\'blur\'); //触发blur事件 72 var numError = $(\'form .onError\').length; 73 if (numError) { 74 return false; 75 } 76 alert("注册成功,密码已发到你的邮箱"); 77 }); 78 79 //重置 80 $(\'#res\').click(function () { 81 $(".formtips").remove(); 82 }); 83 }) 84 //]]> 85 </script> 86 </body> 87 </html>
网页效果：