html用户名和密码不能为空,js 判断登录界面的账号密码是否为空

判断登录界面的账号密码是否为空的时候又不想用alert显示就需要用display来隐藏alert啦(在设置时切忌要将隐藏的内容写在账号和密码的div中，否则会根据屏幕的分辨率不同而有所变化，这是本人教训)

首先要定义账号、密码和隐藏部分的id，即var x=document.getElementById("id")，包括按钮的id，然后点击登录按钮的时候(btn.οnclick=function(){具体的选择隐藏和显示的内容})要写函数进行选择隐藏和显示；在重置按钮的是(btn.οnclick=function(){清空的内容，包括登录按钮显示的内容})

具体代码如下：

请登录

body{

margin:0px auto;

background-image: url(images/dlbj1.png) ;

position: relative;

}

.dl{

width: 380px ;

height: 220px ;

background-image: url(images/dl.png) ;

text-align: center ;

margin: auto ;

margin-top: 15% ;

position: center;

}

.btn{

font-family : 微软雅黑 ;

font-size: medium ;

}

#username{

max-width: 200px ;

margin: 10px 0px 0px 0px ;

height: 28px ;

}

#us{

color: #FFFFFF ;

font-family : 微软雅黑;

}

#ps{

color: #FFFFFF ;

font-family : 微软雅黑;

}

#password{

max-width: 200px ;

margin: 20px 0px 10px 0px ;

height: 28px ;

}

账号：*请输入账号！

密码：*请输入密码！

*账号或密码错误

重置            

登录

var x=document.getElementById("username");

var y=document.getElementById("password");

var btnSubmit = document.getElementById("submit");

var btnReset = document.getElementById("reset");

var u=document.getElementById("u");

var p=document.getElementById("p");

var up=document.getElementById("up");

//点击登录按钮时判断账号、密码是否为空或错误

btnSubmit.οnclick=function(form){

if(x.value==""){

if(y.value==""){

up.style.display="block";

}

else{

u.style.display="block";

up.style.display="none";

}

}

else if(y.value==""){

if(x.value==""){

up.style.display="block";

}

else{

p.style.display="block";

up.style.display="none";

}

}

else{

u.style.display="none";

up.style.display="block";

p.style.display="none";

}

}

//点击重置按钮时清空账号密码

btnReset.οnclick=function(form){

x.value=""; //清空input里的value

y.value="";

u.style.display="none";

up.style.display="none";

p.style.display="none";

}

/*btn.οnclick=function(form){

/*if (x!="admin"||y!=123456){

alert('账号或密码错误!');

}

//判断账号密码是否为空则弹出

if (""==x) {

alert("请输入账号！");

flag=false;

return false;

}

else if(""==y){

alert("请输入密码！");

flag=false;

return false;

}

if(flag==true){

flag=true;

}*/

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！