当前位置: 代码迷 >> Java Web开发 >> 淘宝注册页面提示是如何做的
  详细解决方案

淘宝注册页面提示是如何做的

热度:7998   发布时间:2013-02-25 21:22:00.0
淘宝注册页面提示是怎么做的
比如淘宝注册页面 右边的提示 是怎么做的啊 我会用JQ 做 可是淘宝没有用jq啊 那他是怎么做的 根据什么原理做的啊
他提示都是在div里 我看到。。
除了jq谁还有其他方法吗 提示 出错 聚焦什么的,

------解决方案--------------------------------------------------------
他没用jq,可能用的是纯js啊。
------解决方案--------------------------------------------------------
1、肯定用到了ajax,在頁面源代碼可以看到:
HTML code
<script type="text/javascript">                        function pageBeforeunload(evt,type)               {                var xhr;                if(window.XMLHttpRequest)                {                    xhr = new XMLHttpRequest();                }                else                {                    try                    {                        xhr = new ActiveXObject('Microsoft.XMLHTTP');                    }                    catch(e){}                }                var start=document.getElementById("reg_st_id").value;                var url="http://member1.taobao.com/member/statistics/register_statistic.do?t=1";                url=url+"&s="+start+"&e="+new Date().getTime();                xhr.open('GET', url, true);                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                xhr.send();            }                        (function(){                                window.onbeforeunload=pageBeforeunload;                                 var v=document.createElement("input");                v.setAttribute("id","reg_st_id");                v.setAttribute("name","reg_st");                v.setAttribute("type","hidden");                v.setAttribute("value",new Date().getTime());                //v.value=(new Date()).getTime();                document.body.appendChild(v);            })();        </script>
------解决方案--------------------------------------------------------
我不知道它的源代码,不过我刚刚在项目中参照它的样式写过,纯js+div就能搞定
------解决方案--------------------------------------------------------
function checkpwd(){
var obj=$("#id1").value;
if(obj.length<6||obj.length>16){
$("#id2").innerHTML("不能小于6或大于16");
}else(
$("#id2").innerHTMl("插入的图片勾");
}
}
id1为输入密码框id
id2为后面的提示框id
------解决方案--------------------------------------------------------
你的服务端用什么框架?struts2 和webwork的验证框架都完美支持ajax,很好用。
------解决方案--------------------------------------------------------
js部分:
//验证旧密码是否正确
function validateOldPassword(){
var oldPass = document.getElementById("passForm:oldPass").value;
var opass = document.getElementById("passForm:opass").value;
var trip=document.getElementById("oldTrip");
if(oldPass!=opass && oldPass!=""){
//原密码输入不正确
trip.innerHTML="<img src='${request.contextPath}/baf/images/icons/error.png' style='vertical-align: middle'/>原密码输入不正确"; trip.style.display="inline";
document.getElementById("passForm:oldPass").value = "";
setFocus("passForm:oldPass");
return;
}
trip.style.display="none";
}

页面部分:
<tr>
<td class="column1">
<h:outputText value="#{msgs['oldPassword']}:"
transient="true" />
</td>
<td class="column2">
<input id="oldPass" value=""
style="width:100%;height:23px;"
class="rich-gradient-input"
onblur="validateOldPassword()"/>
  相关解决方案