js 验证用户名和密码是否为空

时间:2022-06-12 16:35:37

<%@ 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>