当前网站中比较流行的js表单验证效果，如果用户不输入字符或者输入格式错误，直接在旁边显示提示信息非常漂亮。
<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>实用js表单验证代码分享_武鸣人</title>
<style type="text/css">
body{font-size:12px;}
ul li span{display:block;height:30px; line-height:30px; width:80px; float:left;}
ul li{clear:both}
.wrong{width:200px;
height:20px;
line-height:20px;
text-indent:30px;
background:url(/img/20240321_www_wuming_ren_7.gif) no-repeat;
position:absolute;
font-size:12px;
}
.right{
width:100px;
height:20px;
position:absolute;
background:url(/img/20240321_www_wuming_ren_8.gif) no-repeat;
}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<form>
<ul width="500">
<li>
<span>邮箱地址</span>
<span><input type="text" name="email" /></span>
</li>
<li>
<span>不能为空</span>
<span><input type="text" name="address" /></span>
</li>
<li>
<span>数字显示</span>
<span><input type="text" name="wuming_ren" /></span>
</li>
<li>
<span>真实姓名</span>
<span><input type="text" name="wuming_trueName" /></span>
</li>
<li>
<span>任意可选项</span>
<span><input type="text" name="buildType" /></span>
</li>
<li>
<span>手机号码</span>
<span><input type="text" name="wuming_renPhoneCall" /></span>
</li>
</table>
</ul>
</form>
<script type="text/javascript">
// 调用示例
var checkobj={mail:"email",phone:"wuming_renPhoneCall",num:"wuming_ren",chinese:"wuming_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地址合法）等检测
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
例如：如果某一项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")
}
}
}
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
/*判断为空*/
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);
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function isUrl(o){
var reg=/^(http\:\/\/)?(\w+\.)+\w{2,3}((\/\w+)+(\w+\.\w+)?)?$/;
return reg.test(o);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
/*判断是否为电话号码 可以是手机或 固定电话*/
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;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
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+200)+"px";
o.ele.style.top=XgetPosition(o).y+"px";
o.ele.innerHTML=mes;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
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};
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</body>
</html>