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

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

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

<span style="font-size:18px;">         <form οnsubmit="returnsubmitFlag();" action="onlineRepairSystem/OnlineRepairServlet?action=judgeStudent"method="post">
            <input id="user"class="input_text input_text_username" type="text" name="user"onBlur="checkUser()" οnfοcus="focusUser()"οnkeyup="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()" οnfοcus="focusPassword()" οnkeyup="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()" οnfοcus="focusPassword()" οnkeyup="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:只要你还在尝试,就不算失败。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值