JS做的登陆页面,验证用户名密码非空,按钮经过变色,
使用时请把<>改成<>
<script>
function nameText(){
var name= document.getElementByIdx_x ("uname");
var divID= document.getElementByIdx_x ("divName");
divID.innerHTML="";
if(name.value==""){
divID.innerHTML="用户名不能为空";
return false;
}
}
function passText(){
var pass= document.getElementByIdx_x ("upass");
var divIP= document.getElementByIdx_x ("divPass");
divIP.innerHTML="";
if(pass.value==""){
divIP.innerHTML="密码不能为空";
return false;
}
}
function changecolor1(i){
var color1=document.getElementByIdx_x("inputs"+i);
color1.style.backgroundColor="#ff9";
}
function changecolor2(i){
var color=document.getElementByIdx_x("inputs"+i);
color.style.backgroundColor="#fff";
}
</script>
</head>
<body>
<div id="divz">
<table>
<tr><td>用户名:</td><td><input class="iptext" type="text" id="uname" οnblur="nameText()" name="uname"/></td></tr>
<tr><td class="td"></td><td class="td"><div id="divName"></div></td></tr>
<tr><td>密码:</td><td><input class="iptext" type="password" id="upass" οnblur="passText()" name="upass"/></td></tr>
<tr><td class="td"></td><td class="td"><div id="divPass"></div></td></tr>
<tr>
<td></td>
<td><input class="inputs" id="inputs1" type="submit" οnmοuseοver="changecolor1(1)" οnmοuseοut="changecolor2(1)" value="登录"/>
<input class="inputs" id="inputs2" type="reset" οnmοuseοver="changecolor1(2)" οnmοuseοut="changecolor2(2)" value="重置" style="margin-left:5px;"/></td></tr>
</table>
</div>
</body>
<script>
function nameText(){
var name= document.getElementByIdx_x ("uname");
var divID= document.getElementByIdx_x ("divName");
divID.innerHTML="";
if(name.value==""){
divID.innerHTML="用户名不能为空";
return false;
}
}
function passText(){
var pass= document.getElementByIdx_x ("upass");
var divIP= document.getElementByIdx_x ("divPass");
divIP.innerHTML="";
if(pass.value==""){
divIP.innerHTML="密码不能为空";
return false;
}
}
function changecolor1(i){
var color1=document.getElementByIdx_x("inputs"+i);
color1.style.backgroundColor="#ff9";
}
function changecolor2(i){
var color=document.getElementByIdx_x("inputs"+i);
color.style.backgroundColor="#fff";
}
</script>
</head>
<body>
<div id="divz">
<table>
<tr><td>用户名:</td><td><input class="iptext" type="text" id="uname" οnblur="nameText()" name="uname"/></td></tr>
<tr><td class="td"></td><td class="td"><div id="divName"></div></td></tr>
<tr><td>密码:</td><td><input class="iptext" type="password" id="upass" οnblur="passText()" name="upass"/></td></tr>
<tr><td class="td"></td><td class="td"><div id="divPass"></div></td></tr>
<tr>
<td></td>
<td><input class="inputs" id="inputs1" type="submit" οnmοuseοver="changecolor1(1)" οnmοuseοut="changecolor2(1)" value="登录"/>
<input class="inputs" id="inputs2" type="reset" οnmοuseοver="changecolor1(2)" οnmοuseοut="changecolor2(2)" value="重置" style="margin-left:5px;"/></td></tr>
</table>
</div>
</body>