JS做的登陆页面，验证用户名密码非空

最新推荐文章于 2022-05-28 21:26:42 发布

s2940086379

最新推荐文章于 2022-05-28 21:26:42 发布

阅读量1w

点赞数 2

分类专栏： html+css+js 文章标签：密码 color class js 变量

本文链接：https://blog.csdn.net/s2940086379/article/details/45915495

版权

html+css+js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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＞