【JS】判断用户名和密码是否为空

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

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

<span style="font-size:18px;">         <form onsubmit="returnsubmitFlag();" action="onlineRepairSystem/OnlineRepairServlet?action=judgeStudent"method="post">
            <input id="user"class="input_text input_text_username" type="text" name="user"onBlur="checkUser()" onfocus="focusUser()"onkeyup="this.value=this.value.replace(/[, ]/g,'')"/>
            <label id="userNullTip"></label>
            <br/>
            <input id="password"class="input_text input_text_password" type="password" name="password"onBlur="checkPassword()" onfocus="focusPassword()" onkeyup="this.value=this.value.replace(/[, ]/g,'')"/>
            <label id="passwordNullTip"></label>
            <br/>
            <div class="login_enterf_white text_align_c f14">
            <input type="submit"value="登录" name="login"/>
            </div>
         </form></span>

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

<span style="font-size:18px;"><input id="password"class="input_text input_text_password" type="password" name="password"onBlur="checkPassword()" onfocus="focusPassword()" onkeyup="this.value=this.value.replace(/[, ]/g,'')"/></span>

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

接下来说说<labelid="passwordNullTip"></label>标签，<label>标签用于显示输入错误后的红色提示字。

最后说说JS的代码：

<span style="font-size:18px;"><script type="text/javascript">
   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="<font color='red'>用户名不能为空！</font>";//设<label>标签红色提示内容          
      }
      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="<font color='red'>密码不能为空！</font>";//设置红色提示内容         
      }
      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="<font color='red'>用户名不能为空！</font>";//设置红色提示内容
         }
         if(passFlag==false){
            var passNullTip=document.getElementById("passwordNullTip");
            passNullTip.innerHTML="<font color='red'>密码不能为空！</font>";//设置红色提示内容
         }
         flag=false;
      }
      return flag;
   }
 
</script></span>

最终的运行结果如下：

Author:事始

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