html用户名和密码不能为空,【JS】判断用户名和密码是否为空

在用户登录页面我们通常需要过滤用户的一些输入，如空格输入或者什么都不输等等，并在用户输入完成时给出红色字的错误提示，在这里分享一些自己写的代码。

首先在login.jsp页面中会有一个用户名和密码的提交表单：

在这里说说输入框的几个属性：

class是CSS里面的样式，不用管。onBlur属性是输入框失去焦点时触发的事件，onfocus属性是输入框获得焦点时的触发事件。οnkeyup="this.value=this.value.replace(/[,]/g,'')"表示在输入用户名和密码时不能输入空格和英文状态下的逗号，如果输入的话将会被自动替换。

接下来说说标签，标签用于显示输入错误后的红色提示字。

最后说说JS的代码：

var flag;//判断是否可以提交

var userFlag=false;

var passFlag=false;

function checkUser(){ //判断用户名输入是否为空，如果为空给出错误提示

var userElement=document.getElementById("user"); //获得user输入标签

var userNullTip=document.getElementById("userNullTip"); //获得提示标签

if(userElement.value.length==0){

userNullTip.innerHTML="用户名不能为空！";//设标签红色提示内容

}

else{

userFlag=true;

}

}

function focusUser(){

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

userNullTip.innerHTML=""; //隐藏红色提示文字

userFlag=false;

}

function checkPassword(){

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

var passNullTip=document.getElementById("passwordNullTip");

if(passElement.value.length==0){

passNullTip.innerHTML="密码不能为空！";//设置红色提示内容

}

else{

passFlag=true;

}

}

function focusPassword(){

var passNullTip=document.getElementById("passwordNullTip");

passNullTip.innerHTML="";

passFlag=false;

}

function submitFlag(){

if(userFlag==true&&passFlag==true){ //如果用户名和密码输入都不为空，则允许提交

flag=true;

}

else{

if(userFlag==false){

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

userNullTip.innerHTML="用户名不能为空！";//设置红色提示内容

}

if(passFlag==false){

var passNullTip=document.getElementById("passwordNullTip");

passNullTip.innerHTML="密码不能为空！";//设置红色提示内容

}

flag=false;

}

return flag;

}

最终的运行结果如下：

Author:事始

Sign：只要你还在尝试，就不算失败。