第五讲 操作表单
说到表单、相信每一个编程人员都知道它的重要性变，它在用户与服务器中扮演的角色就是用户数据的传递者，它最直接与用户接触的。这一章主要要求大家掌握的就是如何使用JQuery做表单验证？现在就来看这些例子吧！
实例1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" src="jquery-1.4.1.js"></script> <script type="text/javascript"> $(function(){ // 给必须输入的元素后面，追加“*” $(".required").parent().append($("<b style='color:red'>*</b>")); //元素获取焦点 $("input[name=txtname]").focus(function(){ //先删除 $(this).parent().children("span").remove(); //追加一个 $(this).parent().append($("<span>请输入有效的用户名(中文)，长度为2-4之间！</span>")); }).blur(function(){ //判断元素的值 var txtval = $(this).val(); //先删除 $(this).parent().children("span").remove(); //正则表达式 var regexp = /^[\u4e00-\u9fa5]{2,4}$/; if(regexp.test(txtval)==false){ //追加一个 $(this).parent().append($("<span class='error' style='color:red'>您输入的用户名错误！</span>")); } else{ $(this).parent().append($("<span class='success' style='color:green'>恭喜你输入正确！</span>")); } }); $("input[type=submit]").click(function(){ //模拟一个失去焦点的事件 $(".required").trigger("blur"); if($(".error").size()==0){ return true; } return false; }); }); </script> <style type="text/css"> * { font-size:12px; } </style> </head> <body> <form id="form1" name="form1" method="post" action=""> <table width="505" border="1"> <tr> <td colspan="2">用户注册</td> </tr> <tr> <td width="115">用户名:</td> <td width="374"><label> <input type="text" name="txtname" class="required" /> </label></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="txtpwd" class="required"/></td> </tr> <tr> <td>确认密码:</td> <td><input type="password" name="txtpwd2" class="required"></td> </tr> <tr> <td>Email:</td> <td><input type="text" name="txtemail" class="required" /></td> </tr> <tr> <td>地址:</td> <td><input type="text" name="txtaddress" /></td> </tr> <tr> <td colspan="2"><label> <input type="submit" name="Submit" value="提交" /> <input type="reset" name="Submit2" value="重置" /> </label></td> </tr> </table> <p> var tid = setInterval(“函数（）”，时间);</p> <p>clearInterval(tid);</p> <p> </p> </form> </body> </html> 实例2： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表单验证</title> <script src="../jquery/jquery-1.7.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("form :input.required").each(function(){ var $required=$("<strong class='high'>*</strong>"); $(this).parent().append($required); }); $('form :input:text').blur(function(){ var $parent=$(this).parent(); $parent.find(".formtips").remove(); if($(this).is("#username")){ if(this.value==""||this.length<6){ var errorMsg="请输入至少6位的用户名"; $parent.append("<span class='formtips onError'>"+errorMsg+"</span>"); }else{ var okMsg="输入正确"; $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>"); } } if($(this).is("#email")){ if(this.value==""||(this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){ var errorMsg="请输入正确的E-Mail地址"; $parent.append("<span class='formtips onError'>"+errorMsg+"</span>"); }else{ var okMsg="输入正确"; $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>"); } } $(this).removeClass("focus"); }).keyup(function(){ $(this).triggerHandler("blur"); $(this).addClass("focus"); }).focus(function(){ $(this).triggerHandler("blur"); $(this).addClass("focus"); }); $("#send").click(function(){ $("form :input.required").trigger("blur"); var numError=$("form .onError").length; if(numError){ return false; } alert("注册成功，密码已成功发到你的邮箱，请注意查收"); }); $("#res").click(function(){ $(".formtips").remove(); }); }); </script> <style type="text/css"> body{ font:12px/19px Arial, Helvetica, sans-serif; color:#666; } form div{ margin:5px 0; } .int label{ float:left; width:100px; text-align:right; } .int input{ padding:1px 1px; border:1px solid #ccc; height:16px; } .sub{ padding-left:100px; } .sub input{ margin-right:10px; } .formtips{ width:200px; margin:2px; padding:2px; } .onError{ background:#FFE0E9 url(images/onError.gif) no-repeat 0 center; padding-left:25px; } .onSuccess{ background:#E9FBEB url(images/onCorrect.gif) no-repeat 0 center; padding-left:25px; } .high{ color:red; } .focus{ border:1px s #f00; background:#fcc; } </style> </head> <body> <form method="post" action=""> <div class="input"> <label for="username">用户名：</label> <input type="text" id="username" class="required" /> </div> <div class="input"> <label for="email">邮箱：</label> <input type="text" id="email" class="required" /> </div> <div class="input"> <label for="personinfo">个人资料：</label> <input type="text" id="personinfo" /> </div> <div class="sub"> <input type="submit" value="提交" id="send" /><input type="reset" id="res" /> </div> </form> </body> </html> 补充实例_ 不规则图形： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> .leftDiv { position:relative; width:300px; height:80px; border:1px #000000 solid; border-right:none; z-index:2; background:#FFFFFF; } div{ float:left; } .rightDiv{ position:relative; border:1px #000000 solid; width:500px; height:500px; left:-1px; z-index:1; background:#FFFFFF; } </style> </head> <body> <div class="leftDiv"> <p>左边的div</p> <p>dsfdsf</p> </div> <div class="rightDiv"> <p>右边大的div</p> <p>dfd</p> <p>dfd</p> <p>fd</p> <p>fd</p> <p>fdf</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p> </p> </div> </body> </html>
posted on 2012-11-05 09:48 somewhere! 阅读(185) 评论(0) 编辑 收藏 举报
