比如淘宝注册页面 右边的提示 是怎么做的啊 我会用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()"/>