一個表單驗證
阿新 • • 發佈：2017-05-18
wrong spa 插件 position ava char email格式 box eth
<!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=utf-8" /> <!--<title>js表單驗證插件、郵箱驗證、中文漢字驗證、手機號碼驗證、數字驗證等</title>--> <title>js 111</title> <meta name="description" content="js表單驗證插件支持多種內容表單驗證，有js郵箱地址驗證、js中文漢字驗證、js手機號碼驗證、js數字驗證等。內含js代碼下載。" /> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;font-size:12px;} a,img{border:0;} /* formbox*/ .formbox{width:650px;margin:0 auto;} .formbox li{height:40px;} .formbox li label{line-height:32px;width:80px;float:left;text-align:right;} .formbox li input.text{float:left;height:16px;font-size:12px;padding:2px;margin:3px 0 0 0;width:200px;} .formbox li .btnimg{height:24px;background:#ff6600;border:0;width:80px;cursor:pointer;font-size:12px;font-weight:800;color:#fff;} /*必要元素*/ .wrong{width:200px;height:20px;line-height:20px;padding-left:30px;background:url(error.png) no-repeat;position:absolute;font-size:12px;} .right{width:100px;height:20px;position:absolute;background:url(ok.png) no-repeat;} </style> </head> <body> <form method="post" action=""> <ul class="formbox"> <li> <label>郵箱地址：</label><input type="text" name="email" class="text" /> </li> <li> <label>不能為空：</label><input type="text" name="address" class="text" /> </li> <li> <label>年齡：</label><input type="text" name="jsfoot" class="text" /> </li> <li> <label>真實姓名：</label><input type="text" name="trueName" class="text" /> </li> <li> <label>任意可選項：</label><input type="text" name="buildType" class="text" /> </li> <li> <label>手機號碼：</label><input type="text" name="PhoneCall" class="text" /> </li> <li> <label> </label><input type="submit" class="btnimg" value="提交" /> </li> </ul> </form> <script type="text/javascript"> // 調用示例 var checkobj={ mail:"email", //驗證郵箱格式 phone:"PhoneCall", //驗證手機號碼 num:"jsfoot", //驗證數字格式 chinese:"trueName", //驗證中文漢字 address:"address" //驗證空值 } XformCheck(document.forms[0],checkobj); /* descript : XformCheck; author : popper.w date : 2008-6-22 @pram xfromElement 需要檢測的form對象 @pram checkobj 設置需要檢測的項 默認有mail（郵件地址）、phone（手機或固定電話）、num（數字）、chinese（漢字）、empty（是否為空）、length（長度）、url（url地址合法）等檢測 //例如：如果某一項name為"xxx"需要檢測email格式，則給checkobj中添加{mail:"xxx"}，如果僅僅是檢測是否為空，則直接添加{xxx,"xxx"}即可*/ function XformCheck(xfromElement,checkobj){ var om={}; if(checkobj){ om=checkobj } if(!xfromElement){ return false; } for(var o in checkobj){ xfromElement[checkobj[o]].onblur=function(e){ e=window.event||e; var eSrc=e.srcElement||e.target; var Xvalue=trim(this.value); if(isEmpty(Xvalue)){ ShowMes(eSrc,"此項不能為空","wrong"); }else{ switch(this.name){ case om.mail: if(!isEmail(Xvalue)){ ShowMes(eSrc,"郵箱地址不正確","wrong"); }else{ ShowMes(eSrc,"","right"); } break; case om.phone: if(!isPhone(Xvalue)){ ShowMes(eSrc,"電話號碼格式不正確","wrong"); }else{ ShowMes(eSrc,"","right"); } break; case om.num : if(!isNum(Xvalue)){ ShowMes(eSrc,"只能是數字","wrong"); }else{ ShowMes(eSrc,"","right"); } break; case om.chinese : if(!isChinese(Xvalue)){ ShowMes(eSrc,"必須為漢字","wrong"); }else{ ShowMes(eSrc,"","right") } break; case om.url : if(!isUrl(Xvalue)){ ShowMes(eSrc,"url地址不正確","wrong"); }else{ ShowMes(eSrc,"","right"); } break; case om.length : if(!isProperLen(Xvalue)){ ShowMes(eSrc,"長度不正確不正確","wrong"); }else{ ShowMes(eSrc,"","right"); } break; default : ShowMes(eSrc,"","right") } } } } /*判斷為空*/ function isEmpty(o){ return o==""?true:false; } /*判斷是否為合適長度 6-32 位*/ function isProperLen(o){ var len=o.replace(/[^\x00-\xff]/g,"11").length; if(len>32||len<6){ return false; }else{ return true; } } /*判斷是否為Email*/ function isEmail(o){ var reg=/^\w+\@[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/i; return reg.test(o); } /*判斷url是否正確*/ function isUrl(o){ var reg=/^(http\:\/\/)?(\w+\.)+\w{2,3}((\/\w+)+(\w+\.\w+)?)?$/; return reg.test(o); } /*判斷是否為電話號碼 可以是手機或 固定電話*/ function isPhone(v){ var reg=/((15[89])\d{8})|((13)\d{9})|(0[1-9]{2,3}\-?[1-9]{6,7})/i; if(reg.test(v)){ return true; }else{ return false; } } function isNum(o){ var reg=/[^\d]+/; return reg.test(o)?false:true; } function isChinese(o){ var reg=/^[\u4E00-\u9FA5]+$/; return reg.test(o); } /*去除空白字符*/ function trim(str){ return str.replace(/(^\s*)|(\s*$)/g, ""); } function ShowMes(o,mes,type){ if(!o.ele){ var Xmes=document.createElement("div"); document.body.appendChild(Xmes); o.ele=Xmes; } o.ele.className=type; o.ele.style.display="block"; o.ele.style.left=(XgetPosition(o).x+220)+"px"; o.ele.style.top=XgetPosition(o).y+"px"; o.ele.innerHTML=mes; } } function XgetPosition(e){ var left = 0; var top = 0; while(e.offsetParent){ left += e.offsetLeft; top += e.offsetTop; e= e.offsetParent; } left += e.offsetLeft; top += e.offsetTop; return { x:left, y:top }; } </script> </body> </html>
效果圖：
用到的圖片：
一個表單驗證