js form表单鼠标移入弹出提示功能-白红宇

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

阅读量：6269 次

发布时间：2019-06-22

本文共 5452 字，大约阅读时间需要 18 分钟。

JS 部分

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 部分

<p class="ins-sec10-p1"><span>|</span>第一步：填写基本信息 >> 第二步：填写主体信息 >> 第三步：填写网站信息 >> 第四步：提交并等待审核</p>

</div>

<p class="ins-sec10-p1"><span>|</span>网站域名信息</p>

</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="width15 float-left text-right"><label class="label_small">接入标识：</label></div>

</div> -->

</div>

<p class="ins-sec10-p1"><span>|</span>备案主体基本信息</p>

</div>

</select>

</select>

<div class="width15 float-left text-right"><label class="label_small">主办单位性质：</label></div>

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

</select>

</div>

<div class="width15 float-left text-right"><label class="label_small">主办单位有效证件类型：</label></div>

</select>

</div>

<div class="width15 float-left text-right"><label class="label_small">主办单位有效证件号码：</label></div>

</select>

</div>

</div>