操作說明：用戶點擊登錄按鈕后，若用戶名為空，則彈出“用戶名不能為空”的提示框，同時終止請求；若用戶名不為空，密碼為空，則彈出“密碼不能為空”的提示框，同時終止請求。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> body{ background-color: pink; } </style> <!-- base標簽中的href屬性可以讓當前頁面中的相對路徑變為絕對路徑 --> <base href="http://localhost:8080/Web_Ex/"> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ /* text()方法：獲取或設置成對出現的標簽中的文本值 對象.text()：獲取文本值 對象.text("new value")：設置文本值 html()方法與text()方法的唯一區別是html()方法可以解析html()標簽 */ //給文本框綁定focus事件 $("#username").focus(function(){ //把顯示錯誤信息的span標簽里面的內容置空 $("#msgSpan").html(""); }); /* val():獲取或設置input標簽的value屬性值 對象.val(); 獲取value屬性值 對象.val("new value"); 設置value屬性值 */ //給登錄按鈕綁定單擊事件 $("#subId").click(function(){ //獲取用戶輸入的用戶名 var username = $("#username").val(); //判斷用戶名是否為空 if(username == ""){ alert("用戶名不能為空"); //取消默認行為 return false; } //獲取用戶輸入的密碼用戶名 var password = $("#pwd").val(); //判斷密碼是否為空 if(password == ""){ alert("密碼不能為空"); //取消默認行為 return false; } }); }); </script> </head> <body> <h1>歡迎登錄</h1> <form action="LoginServlet" method="post"> 用戶名稱：<input type="text" name="username" id="username"/><br> 用戶密碼：<input type="password" name="password" id="pwd"/><br> <input type="submit" value="登錄" id="subId"> </form> </body> </html>