综合jQuery在表单中的应用

2025-02-25 技术教程

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metahttp-equiv="refresh"content="600;url=单行文本框.html"/><metaname="description"content="jquery表单应用中的单行文本框应用"/><metaname="keywords"content="jQuery,表单，单行文本框，多行文本框，滚动条的高度，复选框的应用，下拉框的应用，表单验证"/><title>表单应用</title><styletype="text/css">/*input:hover,textarea:hover{border:1pxsolid#f00;pink;}IE6不支持这样的伪类，因此使用一下jquery来实现* /.focus{border:1pxsolid#f00;pink;}< /span>.msg{border:1pxsolid#666;}.bigger,.smaller,.up,.down{cursor:pointer;}#msg{width:auto;height:150px;}#select1,#select2{width:100px;height:200px;float:left;}.arrowspan{display:block;height:50px;line-height:50px;cursor:pointer;}</style><scripttype="text/javascript"src="../jquery-1.7.2.min.js"></script><scripttype="text/javascript">$(function(){//单行文本框应用$("input:lt(2)").focus(function(){$(this).addClass("focus");}).blur(function(){$(this).removeClass("focus");})//多行文本框应用var$msg=$("#msg");$(".bigger").click(function(){if(!$msg.is(":animated")){if($msg.height()<500){$msg.animate({height:"+=50"},400);};}});$(".smaller").click(function(){if(!$msg.is(":animated")){if($msg.height()>50){$msg.animate({height:"-=50"},400);}}})//滚动条的高度$(".up").click(function(){if(!$msg.is(":animated")){$msg.animate({scrollTop:"-=10"},400);}});$(".down").click(function(){if(!$msg.is(":animated")){$msg.animate({scrollTop:"+=10"},400);}})//复选框的应用//全选$("#checkedAll").click(function(){$("[name=items]:checkbox:lt(4)").prop("checked",true);});//全不选$("#checkedNo").click(function(){$("[name=items]:checkbox:lt(4)").prop("checked",false);});//反选$("#checkedRev").click(function(){$("[name=items]:checkbox:lt(4)").each(function(){/*$(this).attr("checked",!$(this).attr("checked"));//jquery方法显得有点复杂，下面是js方法*/this.checked=!this.checked;})});//发送$("#send").click(function(){varstr="你选中的是：\r\n";//\r\n是换行符$("[name=items]:checkbox:checked").each(function(){str+=$(this).val()+"\r\n";});alert(str);});//用复选框来做全选与全部选$("#selectedAll").click(function(){/*if(this.checked){$("[name=items]:checkbox:gt(3)").prop("checked",true);}else{$("[name=items]:checkbox:gt(3)").prop("checked",false);}*///以上方法可以简写为：$("[name=items]:checkbox:gt(3)").prop("checked",this.checked);});//是按钮复选框和其他复选框联动起来$("[name=items]:checkbox:gt(3)").click(function(){/*varflag=true;//联动方法一：$("[name=items]:checkbox").each(function(){if(!this.checked){flag=false;}});$("#selectedAll").prop("checked",flag);*///联动方法二：var$tmp=$("[name=items]:checkbox:gt(3)");//定义一个临时变量//使用filter()方法筛选出选中的复选框，并直接给selectedAll赋值$("#selectedAll").prop("checked",$tmp.length==$tmp.filter(":checked").length);//判断复选框的总数是否与选中的复选框数量相等});//下拉菜单的应用//左边到右边$("#add1").click(function(){/*var$options=$("#select1option:selected");//获取到选中的相var$remove=$options.remove();//删除下拉列表中选中的相$remove.appendTo("#select2");//追加给右边的下拉列表*///删除和追加这两个步骤可以由appendTo直接完成，以上方法可以写为：var$options=$("#select1option:selected");$options.appendTo("#select2");});$("#add1_all").click(function(){var$options=$("#select1option");//获取所有选项$options.appendTo("#select2");});$("#select1").dblclick(function(){//绑定双击事件var$options=$("option:selected",this);$options.appendTo("#select2");});//右边到左边$("#add2").click(function(){var$options=$("#select2option:selected");$options.appendTo("#select1");});$("#add2_all").click(function(){var$options=$("#select2option");$options.appendTo("#select1");});$("#select2").dblclick(function(){var$options=$("option:selected",this);$options.appendTo("#select1");});//表单验证$("input.required").each(function(){var$required=$("<strongclass='high'>*</strong>");$(this).parent().append($required);}).blur(function(){var$parent=$(this).parent();$parent.find(".formtips").remove();//验证用户名if($(this).is("#username")){if(this.style==""||this.value.length<6){varerrorMsg="请输入至少6位的用户名";$parent.append("<spanclass='formtipsonError'>"+errorMsg+"</span>");}else{varokMsg="输入正确";$parent.append("<spanclass='formtipsonSuccess'>"+okMsg+"</span>");}};//验证邮箱if($(this).is("#email")){if(this.value==""||(this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){varerrorMsg="请输入正确的email地址";$parent.append("<spanclass='formtipsonError'>"+errorMsg+"</span>");}else{varokMsg="输入正确";$parent.append("<spanclass='formtipsonSuccess'"+okMsg+"</span>");};};});})</script></head><body><formaction="#"method="post"id="regForm"><fieldset><legend>个人基本信息</legend><divid=""><labelfor="username">名称：</label><inputtype="text"id="name"/></div><div><labelfor="pass">密码：</label><inputtype="password"id="pass"/></div><divclass="msg"><div><spanclass="bigger">放大</span><spanclass="smaller">缩小</span><spanclass="up">向上</span><spanclass="down">向下</span></div><labelfor="msg">详细信息：</label><textareaid="msg">多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。</textarea></div></fieldset><fieldset><legend>你爱好的运动是？</legend><inputtype="checkbox"name="items"value="足球"/>足球<inputtype="checkbox"name="items"value="篮球"/>篮球<inputtype="checkbox"name="items"value="乒乓球"/>乒乓球<inputtype="checkbox"name="items"value="羽毛球"/>羽毛球<br/><inputtype="button"id="checkedAll"value="全选"/><inputtype="button"id="checkedNo"value="全不选"/><inputtype="button"id="checkedRev"value="反选"/><inputtype="button"id="send"value="提交"/></fieldset><fieldset><legend>你喜爱的水果是？</legend><inputtype="checkbox"name="items"value="苹果"/>苹果<inputtype="checkbox"name="items"value="香蕉"/>香蕉<inputtype="checkbox"name="items"value="葡萄"/>葡萄<inputtype="checkbox"name="items"value="橘子"/>橘子<br/><inputtype="checkbox"id="selectedAll"value="全选/全部选"/>全选/全不选<inputtype="button"id="send2"value="提交"/></fieldset><fieldset><legend>下拉框的应用</legend><selectmultipleid="select1"><option>选项1</option><option>选项2</option><option>选项3</option><option>选项4</option><option>选项5</option><option>选项6</option><option>选项7</option><option>选项8</option></select><divclass="arrow"style="float:left"><spanid="add1">选中添加到右边>></span><spanid="add1_all">全部添加到右边>></span><spanid="add2"><<选中添加到左边</span><spanid="add2_all"><<全部添加到左边</span></div><selectmultipleid="select2"></select></fieldset><fieldset><legend>表单验证</legend><divclass="int"><labelfor="username">用户名：</label><inputtype="text"id="username"class="required"/></div><divclass="int"><labelfor="email">邮箱：</label><inputtype="text"id="email"class="required"/></div><divclass="int"><labelfor="personinfo">个人资料：</label><inputtype="text"id="personinfo"/></div><divclass="sub"><inputtype="submit"value="提交"id="send3"/><inputtype="reset"id="res"/></div></fieldset></form></body></html>

注意：1、<fieldset>标签是使表单相关元素分组；

2、<legend>标签是为<fieldset>、<figure>、<details>变浅定义标题用的；

3、<label>标签中的for 属性规定 label 与哪个表单元素绑定。