一个表单验证
Posted 贺小鸣
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个表单验证相关的知识，希望对你有一定的参考价值。
<!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:原生JavaScript判断是否为邮箱危险字符验证长度验证网址验证小数整数浮点数等常用的验证