js form表单 鼠标移入弹出提示功能

JS 部分

/*
Copyright (C) 2009 - 2012
Email: wangking717@qq.com
WebSite: Http://wangking717.javaeye.com/
Author: wangking
*/
$(function(){
var xOffset = -20; // x distance from mouse
var yOffset = 20; // y distance from mouse

//input tips
$("input[tip],textarea[tip],select[tip]").hover(
function(e) {
var offset = $(this).offset();
var tip = $(this).attr("tip");
/*var top = (offset.top + yOffset);
var left = (offset.left + xOffset);*/
var top = (e.pageY + yOffset);
var left = (e.pageX + xOffset);
$('body').append( '<p id="vtip"><img id="vtipArrow" src="images/vtip_arrow.png"/>' + tip + '</p>' );
$('p#vtip').css("top", top+"px").css("left", left+"px");
},
function() {
$("p#vtip").remove();
}
).mousemove(
function(e) {
var top = (e.pageY + yOffset);
var left = (e.pageX + xOffset);
$("p#vtip").css("top", top+"px").css("left", left+"px");
}
);

$("input[tip],textarea[tip],select[tip").blur(function(){
validate($(this),"input");
});
$("select[reg]").blur(function(){
validate($(this),"select");
});


$("form").submit(function(){
var isSubmit = true;
$("input[reg],textarea[reg]").each(function(){
if(!validate($(this),"input")){
isSubmit = false;
}
});
$("select[reg]").each(function(){
if(!validate($(this),"select")){
isSubmit = false;
}
});
return isSubmit;
});

});

function validate(obj,tagType){
var reg = new RegExp(obj.attr("reg"));
var objValue = obj.attr("value");
if(!reg.test(objValue)){
if(tagType == "input"){
obj.addClass("input_validation-failed");
}else{
obj.addClass("select_validation-failed");
}

return false;
}else{
if(tagType == "input"){
obj.removeClass("input_validation-failed");
}else{
obj.removeClass("select_validation-failed");
}
return true;
}
}

 

 

HTML 部分

<div class="instanceList position-re">
<div class="instanceList-sec1 claroDiff1">
<div class="instanceList-sec10">
<p class="ins-sec10-p1"><span>|</span>第一步：填写基本信息 >> 第二步：填写主体信息 >> 第三步：填写网站信息 >> 第四步：提交并等待审核</p>
</div>
<div class="instanceList-sec10">
<p class="ins-sec10-p1"><span>|</span>网站域名信息</p>
</div>
<div class="instanceList-sec10">
<div class="wrapper15">
<div class="width15 float-left text-right"><label class="label_small">域名：</label></div>
<div class="width85 float-left text-left"><input type="text" id="Ym" class="input_long Ym"\><em>*</em><span class="attention">填写域名的标准形式，如123.com</span></div>
<div class="clear"></div>
<!-- <div class="width15 float-left text-right"><label class="label_small">接入标识：</label></div>
<div class="width85 float-left text-left Jrbs">
<em style="left: -1px;"></em>
</div> -->
<div class="clear"></div>
</div>
</div>
</div>
<div class="instanceList-sec1 claroDiff1">
<div class="instanceList-sec10">
<p class="ins-sec10-p1"><span>|</span>备案主体基本信息</p>
</div>
<div class="instanceList-sec10">
<div class="wrapper15">
<div class="width15 float-left text-right"><label class="label_small">接入方式：</label></div>
<div class="width85 float-left text-left">
<select id="Jrfs" class="Jrfs">
<option value="">请选择</option>
</select>
<em style="left: -1px;">*</em></div>
<div class="clear"></div>

<div class="width15 float-left text-right"><label class="label_small">分布地点：</label></div>
<div class="width85 float-left text-left">
<select id="Fbdd" class="Fbdd">
<option value="">请选择</option>
</select>
<em style="left: -1px;">*</em><span class="attention"></span></div>
<div class="clear"></div>

<div class="width15 float-left text-right"><label class="label_small">主办单位性质：</label></div>
<div class="width85 float-left text-left">
<select id="Dwxz" class="Dwxz" tip="北京、天津、上海、广东、浙江地区为企业性质的主办单位，只能通过“工商营业执照”备案；<br>内蒙古管局要求：主办单位证件必须是本省的有效证件；<br>北京管局要求：个人主体用户，请用中国公民身份证进行备案；<br>学校或律师事务所请根据证件上的机构类型进行选择，如：社会团体或事业单位，且只能通过“组织机构代码证书”备案">
<option value ="0" class="text-left">请选择</option>
</select>
<em style="left: -1px;">*</em>
</div>
<div class="clear"></div>

<div class="width15 float-left text-right"><label class="label_small">主办单位有效证件类型：</label></div>
<div class="width85 float-left text-left">
<select id="Zjlx" class="Zjlx">
<option value ="0" class="text-left">请选择</option>
</select>
<em style="left: -1px;">*</em>
</div>
<div class="clear"></div>
<div class="width15 float-left text-right"><label class="label_small">主办单位有效证件号码：</label></div>
<div class="width85 float-left text-left"><input type="text" id="Zjhm" class="input_primary Zjhm"\><em>*</em><span class="btips">输入有误,请检查！</span></div>
<div class="clear"></div>

<div class="width15 float-left text-right"><label class="label_small">IP类型：</label></div>
<div class="width85 float-left text-left">
<select id="Iplx" class="Iplx">
<option value="">请选择</option>
<option value="0">Ipv4</option>
<option value="1">Ipv6</option>
</select>
<em style="left: -1px;"></em></div>
<div class="clear"></div>
<div class="width15 float-left text-right"><label class="label_small">起始IP：</label></div>
<div class="width85 float-left text-left"><input type="text" id="Qsip" class="input_primary Qsip"\><em>*</em><span class="btips">输入有误,请检查！</span></div>
<div class="clear"></div>
<div class="width15 float-left text-right"><label class="label_small">终止IP：</label></div>
<div class="width85 float-left text-left"><input type="text" id="Zzip" class="input_primary Zzip"\><em>*</em><span class="btips">输入有误,请检查！</span></div>
<div class="clear"></div>
</div>
<div class="wrapper15">
<span class="btn_primary save" style="margin-left: 332px;"></span><span class="btn_primary back"></span>
<div class="clear"></div>
</div>
</div>
</div>

</div>