jquery 鼠标旁边跟随提示框

来源：互联网发布：淘宝阶层有什么区别编辑：程序博客网时间：2024/04/20 01:05

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-1.9.1.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css"> .toEmpty{background: #ff0000;} .inner{ color:#ff0000; } .followMouse{  position: absolute;  left: 0.5px;  top: 0.5px;  display:none;    border-style:solid;  border-color:blue; }</style></head><body><s:form id="form1" action="authorAction_add" namespace="/author" ><s:textfield name="nameForm1" label="用户名"></s:textfield><s:textfield name="emailForm1" label="邮件地址"></s:textfield><s:fielderror id="password1error" name="password1error"></s:fielderror><s:password id="password1" name="password1Form1" label="密码"></s:password><s:password id="password2" name="password2Form1" label="确认密码"></s:password><s:textfield name="fromForm1" label="来自"></s:textfield><%-- <s:select list=""></s:select> --%><s:select name="sex" list="#{'男':'男','女':'女'}" headerKey="" headerValue="性别" lable="性别"></s:select><%-- <s:select list="" label="职业" name="profession"></s:select><s:select list="" label="行业" name="trade"></s:select><s:select list="" label="工作年限" name="worktime"></s:select><s:textfield name="" label="验证码"></s:textfield><s:checkbox>我已经阅读并同意</s:checkbox> --%><s:submit value="注册"></s:submit><div id="log" class="followMouse"></div> </s:form><script type="text/javascript">//TODO jquery：创建一个新的节点对象$("#form1").submit(function() {  var flag = true;var allInputs = $('input[name$="Form1"]');allInputs.each(function(){if($(this).val().length==0){flag = false;}if($(this).attr("name")=="password1Form1"){//TODO 判读是否submitif($(this).val().length<6){flag=false;}}if($(this).attr("name")=="password2Form1"){if($(this).val()!=$('input[name="password1Form1"]').val()){flag = false;}}});allInputs.each(function isEmpty(){if($(this).val().length ==0){$(this).addClass("toEmpty");}});allInputs.on('mouseenter',function(e){if($(this).val()==null || $(this).val().length==0){$("#log").css({display:"block",left:function(index,value){return e.pageX+2;},top:function(index,value){return e.pageY+2;}});$("#log").data("test","请输入信息");$("#log").text($("#log").data("test"));}else if($(this).attr("name")=="password1Form1"){var length = $(this).val().length;if(length<6){$("#log").css({display:"block",left:function(index,value){return e.pageX+2;},top:function(index,value){return e.pageY+2;}});$("#log").removeData("test");$("#log").data("test","最小长度为6,当前长度为"+length);$("#log").text($("#log").data("test"));}}else if($(this).attr("name")=="password2Form1"){if($(this).val()!=$('input[name="password1Form1"]').val()){$("#log").css({display:"block",left:function(index,value){return e.pageX+2;},top:function(index,value){return e.pageY+2;}});$("#log").removeData("test");$("#log").data("test","两次填写不一致,请重新填写");$("#log").text($("#log").data("test"));}}});allInputs.on("mouseleave",function(e){$("#log").css({display:"none"});});return flag;});</script></body></html>

提交之后，如果输入框里面是空，但鼠标进入对话框中则会跟随鼠标提示"请输入信息",如果密码输入框不为空，而密码框1中字符少于6，则提示","最小长度为6,当前长度为"+length,如果密码框2中与密码框1中不等，则提示","两次填写不一致,请重新填写",档鼠标移出对话框，则提示消失。

效果参考iteye注册页面
改进一

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-1.9.1.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css"> .toEmpty{background: #ff0000;} .inner{ color:#ff0000; } .followMouse{  position: absolute;  left: 0.5px;  top: 0.5px;  display:none;    border-style:solid;  border-color:blue; }</style></head><body><s:form id="form1" action="authorAction_add" namespace="/author" ><s:textfield id="nameForm1" name="name" label="用户名"></s:textfield><s:textfield id="emailForm1" name="email" label="邮件地址"></s:textfield><s:fielderror id="password1error" name="password1error"></s:fielderror><s:password id="password1Form1" name="password" label="密码"></s:password><s:password id="password2Form1" name="password2" label="确认密码"></s:password><s:textfield name="from" label="来自"></s:textfield><s:select list="#{'北京':'北京','上海':'上海','广州':'广州','深圳':'深圳'}"></s:select><s:select name="sex" list="#{'男':'男','女':'女'}" label="性别"></s:select><s:select list="#{'CTO/CIO/技术总监':'CTO/CIO/技术总监','部门经理/部门主管':'部门经理/部门主管','部门经理/部门主管':'部门经理/部门主管'}" label="职业" name="profession"></s:select><s:select list="#{'金融':'金融','电信':'电信','互联网':'互联网','物流':'物流'}" label="行业" name="trade"></s:select><s:select list="#{'在读学生':'在读学生','应届毕业生':'应届毕业生','一年以上':'一年以上','两年以上':'两年以上'}" label="工作年限" name="worktime"></s:select><s:textfield name="yanzheng" label="验证码"></s:textfield><s:checkbox name="agree" label="我已经阅读并同意"></s:checkbox> <s:submit value="注册"></s:submit><div id="log" class="followMouse"></div> </s:form><script type="text/javascript">var clickSubmit = false;//是否点击提交var clickEmail = false;//是否点击emailvar haveEmail = false; //是否有此emailvar allInputs = $('input[id$="Form1"]');$('input[id="emailForm1"]').change(function(){clickEmail=true;$.get("author/authorAction_checkEmail",{email:$('input[id="emailForm1"]').val()},function(data){alert(data);        if(data=="true"){        $("#log").data("email","邮件地址已存在");haveEmail=true;        }        else if(data=="false"){        $("#log").removeData("email");        haveEmail= false;        }                });});    $('input[id="emailForm1"]').on('mouseenter',function(e){    if(clickEmail && haveEmail){    $("#log").css({display:"block",left:function(index,value){return e.pageX+2;},top:function(index,value){return e.pageY+2;}});$("#log").text($("#log").data("email"));    }    });    $('input[id="emailForm1"]').on("mouseleave",function(e){    if(clickEmail){    $("#log").css({display:"none"});    }    });//TODO jquery：创建一个新的节点对象$("#form1").submit(function() {  var flag = true;clickSubmit=true;allInputs.each(function(){if($(this).val().length==0){flag = false;}});if($(this).attr("id")=="password1Form1"){//TODO 判读是否submitif($(this).val().length<6){flag=false;}}if($(this).attr("id")=="password2Form1"){if($(this).val()!=$('input[id="password1Form1"]').val()){flag = false;}}if(haveEmail){flag = false;}alert(flag);return flag;});//红色classallInputs.on('blur',function(){if($(this).val().length ==0){$(this).addClass("toEmpty");}});//对话框提示allInputs.on('mouseenter',function(e){if($(this).hasClass("toEmpty")){if($(this).val()==null || $(this).val().length==0){$("#log").css({display:"block",left:function(index,value){return e.pageX+2;},top:function(index,value){return e.pageY+2;}});$("#log").data("test","请输入信息");$("#log").text($("#log").data("test"));}else if($(this).attr("id")=="password1Form1"){var length = $(this).val().length;if(length<6){$("#log").css({display:"block",left:function(index,value){return e.pageX+2;},top:function(index,value){return e.pageY+2;}});$("#log").data("password1","最小长度为6,当前长度为"+length);$("#log").text($("#log").data("password1"));}}else if($(this).attr("id")=="password2Form1"){if($(this).val()!=$('input[name="password1Form1"]').val()){$("#log").css({display:"block",left:function(index,value){return e.pageX+2;},top:function(index,value){return e.pageY+2;}});$("#log").data("password2","两次填写不一致,请重新填写");$("#log").text($("#log").data("password2"));}}}});allInputs.on("mouseleave",function(e){$("#log").css({display:"none"});});</script></body></html>

改进二

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-1.9.1.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css"> .toEmpty{background: #ff0000;} .inner{ color:#ff0000; } .followMouse{  position: absolute;  left: 0.5px;  top: 0.5px;  display:none;    border-style:solid;  border-color:blue; }</style></head><body><s:form id="form1" action="authorAction_add" namespace="/author" ><s:textfield id="nameForm1" name="name" label="用户名"></s:textfield><s:textfield id="emailForm1" name="email" label="邮件地址"></s:textfield><s:fielderror id="password1error" name="password1error"></s:fielderror><s:password id="password1Form1" name="password" label="密码"></s:password><s:password id="password2Form1" name="password2" label="确认密码"></s:password><s:textfield name="from" label="来自"></s:textfield><s:select list="#{'北京':'北京','上海':'上海','广州':'广州','深圳':'深圳'}"></s:select><s:select name="sex" list="#{'男':'男','女':'女'}" label="性别"></s:select><s:select list="#{'CTO/CIO/技术总监':'CTO/CIO/技术总监','部门经理/部门主管':'部门经理/部门主管','部门经理/部门主管':'部门经理/部门主管'}" label="职业" name="profession"></s:select><s:select list="#{'金融':'金融','电信':'电信','互联网':'互联网','物流':'物流'}" label="行业" name="trade"></s:select><s:select list="#{'在读学生':'在读学生','应届毕业生':'应届毕业生','一年以上':'一年以上','两年以上':'两年以上'}" label="工作年限" name="worktime"></s:select><s:textfield name="yanzheng" label="验证码"></s:textfield><s:checkbox name="agree" label="我已经阅读并同意"></s:checkbox> <s:submit value="注册"></s:submit><div id="log" class="followMouse"></div> </s:form><script type="text/javascript">var clickSubmit = false;//是否点击提交var clickEmail = false;//是否点击emailvar haveEmail = false; //是否有此emailvar flag = true; //是否符合提交条件var allInputs = $('input[id$="Form1"]');$('input[id="emailForm1"]').change(function(){clickEmail=true;$.get("author/authorAction_checkEmail",{email:$('input[id="emailForm1"]').val()},function(data){alert(data);        if(data=="true"){        $("#log").data("email","邮件地址已存在");haveEmail=true;        }        else if(data=="false"){        $("#log").removeData("email");        haveEmail= false;        }                });});    $('input[id="emailForm1"]').on('mouseenter',function(e){    if(clickEmail && haveEmail){    $("#log").css({display:"block",left:function(index,value){return e.pageX+2;},top:function(index,value){return e.pageY+2;}});$("#log").text($("#log").data("email"));    }    });    $('input[id="emailForm1"]').on("mouseleave",function(e){    if(clickEmail){    $("#log").css({display:"none"});    }    });//TODO jquery：创建一个新的节点对象$("#form1").submit(function() {  clickSubmit=true;allInputs.each(function(){if($(this).val().length==0){flag = false;}});if($(this).attr("id")=="password1Form1"){//TODO 判读是否submitif($(this).val().length<6){flag=false;}}if($(this).attr("id")=="password2Form1"){if($(this).val()!=$('input[id="password1Form1"]').val()){flag = false;}}if(haveEmail){flag = false;}alert(flag);return flag;});//对话框提示allInputs.on('mouseenter blur',function(e){if($(this).val()==null || $(this).val().length==0){$("#log").css({display:"block",left:function(index,value){return e.pageX+2;},top:function(index,value){return e.pageY+2;}});$("#log").data("test","请输入信息");$("#log").text($("#log").data("test"));flag = false;if(e.type=="blur"){$(this).addClass("toEmpty");}}else if($(this).attr("id")=="password1Form1"){var length = $(this).val().length;if(length<6){$("#log").css({display:"block",left:function(index,value){return e.pageX+2;},top:function(index,value){return e.pageY+2;}});$("#log").data("password1","最小长度为6,当前长度为"+length);$("#log").text($("#log").data("password1"));flag = false;if(e.type=="blur"){$(this).addClass("toEmpty");}}}else if($(this).attr("id")=="password2Form1"){if($(this).val()!=$('input[name="password1Form1"]').val()){$("#log").css({display:"block",left:function(index,value){return e.pageX+2;},top:function(index,value){return e.pageY+2;}});$("#log").data("password2","两次填写不一致,请重新填写");$("#log").text($("#log").data("password2"));flag = false;if(e.type=="blur"){$(this).addClass("toEmpty");}}}});allInputs.on("mouseleave",function(e){$("#log").css({display:"none"});});</script></body></html>

参考jquery api