▶js 验证用户名和密码是否为空包含全代码

最新推荐文章于 2023-05-09 14:56:31 发布

置顶 weixin_44761983

最新推荐文章于 2023-05-09 14:56:31 发布

阅读量362

点赞数

本文链接：https://blog.csdn.net/weixin_44761983/article/details/95943241

版权

非常简短的前言

前端方式验证输入的用户名密码是否为空

上代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>My JSP 'userValidate.jsp' starting page</title>  
      
     <script type="text/javascript">  
        function checkUserName(obj){  
            var username = obj;  
            var checkUserNameResult = document.getElementById("checkUserNameResult");    
            if(username.trim().length==0){  
                  checkUserNameResult.innerHTML = "用户名不能为空";    
                  obj.focus();  
            }else{  
                 checkUserNameResult.innerHTML = "";    
            }  
        }  
    </script>  
    <script type="text/javascript">  
        function checkPassword(obj){  
            var password = obj;  
            var checkPasswordResult = document.getElementById("checkPasswordResult");   
            if(password.trim().length==0){  
                checkPasswordResult.innerHTML = "密码不能为空";    
                obj.focus();  
            }else{  
                 checkPasswordResult.innerHTML = "";    
            }  
        }  
    </script>  
  </head>  
  <body>  
  <table>  
      <tr>  
        <td>用户名：</td>  
        <td><input type="text" name="username"  onblur="checkUserName(this.value);" /></td>  
        <td><span id="checkUserNameResult" style="color: red "></span>  </td>  
    </tr>  
    <tr>  
    <td>密  码：</td>  
    <td><input type="password" name="password" onblur="checkPassword(this.value);"/>  
    <td><span id="checkPasswordResult" style="color: red "></span></td>  
    </tr>  
    <tr><td><input type="submit" value="提交" ></td></tr>  
    </table>  
  </body>  
</html>