操作说明：用户点击登录按钮后，若用户名为空，则弹出“用户名不能为空”的提示框，同时终止请求；若用户名不为空，密码为空，则弹出“密码不能为空”的提示框，同时终止请求。
<!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>