參考：http://blog.csdn.net/fightfaith/article/details/50277337
需求：實現用戶注冊頁面並作出邏輯校驗。要求：
（1）完成注冊頁面樣式如下：
（2）頁面提交，用戶注冊信息不符合規范，要顯示紅色提示框，如下：
分析：JSP實現頁面元素，CSS做頁面美化，JavaScript 實現邏輯校驗；用戶注冊規則采用正則表達式。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>注冊頁面</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link type="text/css" rel="stylesheet" href="register.css"> <script type="text/javascript" src="register.js"></script> </head> <body> <form action="UserServlet?method=register" method="post" onsubmit="return validateForm()"> <table border="26" align="center" width="50%"> <caption> 用戶注冊 </caption> <tr> <td align="right"> <sup> <font color="red">*</font> </sup> 用戶名： </td> <td> <input type="text" name="username" id="username" class="input_class" onblur="checkusername(this)" /> <span id="username_span">用戶名由3-5個字符組成</span> </td> </tr> <tr> <td align="right"> <sup> <font color="red">*</font> </sup> 密碼： </td> <td> <input type="password" name="password1" id="password1" class="input_class" onblur="checkpassword1(this)" /> <span id="password1_span">請輸入8-12位密碼</span> </td> </tr> <tr> <td align="right"> <sup> <font color="red">*</font> </sup> 確認密碼： </td> <td> <input type="password" name="password2" id="password2" class="input_class" onblur="checkpassword2(this)" /> <span id="password2_span">兩次密碼不一致</span> </td> </tr> <tr> <td align="right"> <sup> <font color="red">*</font> </sup> Email： </td> <td> <input type="text" name="email" id="email" class="input_class" onblur="checkemail(this)" /> <span id="email_span">格式示例：xxxxxxxx@163.com</span> </td> </tr> <tr> <td align="center" colspan="2"> <!-- 合並兩列 --> <input type="submit" class="aaa" value="注冊" /> <input type="reset" class="aaa" value="重置" /> </td> </tr> </table> </form> </body> </html>
2、CSS進行頁面美化。
在本文 CSS 代碼中主要根據類選擇器、標簽選擇器來設置相應的標簽樣式：
<span style="font-size:14px;"> .input_class { width:250px; height:16px; } caption{ font-size:30px; color:red; text-shadow: yellow 6px 0px 5px; font-stretch: wider; font-weight: 900; } .aaa{ font-size:16px; font-weight: bold; } </span>
3、JavaScript 進行邏輯校驗。
在JavaScript 代碼中需要用到正則表達式來簡化驗證：
//用戶名： var usernameRegex = /^\w{3,15}$/; //密碼： var passwordRegex = /^\w{6,12}$/; //郵箱： var emailRegex = /^\w+@\w+(\.\w+)+$/; //alert("222"); function validateForm(){ //定義validateForm方法用於客戶端校驗 var flag = true; //校驗用戶名 var usernameNode = byId("username"); //獲得ID值為username的節點對象 var username = usernameNode.value; //獲得usernameNode節點的值，即用戶在username文本框內填寫的值 if(!usernameRegex.test(username)){ //驗證獲得到的值是否符合正則表達式 byId("username_span").style.color = "red"; //如果不符合，則將ID值為username_span的節點對象內容變為紅色 flag = false; //返回false，不提交 } //校驗密碼 var passwordNode = byId("password1"); //獲得ID值為password的節點對象 var password = passwordNode.value; if(!passwordRegex.test(password)){ byId("password1_span").style.color = "red"; flag = false; } //確認密碼 var rePasswordNode = byId("password2"); //獲得ID值為rePassword的節點對象 var rePassword = rePasswordNode.value; if(!password==rePassword){ byId("password2_span").style.color = "red"; flag = false; }else if(!passwordRegex.test(rePassword)){ byId("password2_span").style.color = "red"; flag = false; }else{ byId("password2_span").style.color = "green"; } //校驗郵箱 var emailNode = byId("email"); //獲得ID值為Email的節點對象 var email = emailNode.value; if(!emailRegex.test(email)){ byId("email_span").style.color = "red"; flag = false; } return flag; } function byId(id){ //自定義方法，用於獲取傳遞過來的ID值對應的節點對象 return document.getElementById(id); } function checkUsername(node){ //當鼠標離開節點時調用此方法，驗證節點內容是否符合注冊規范 //校驗用戶名 var username = node.value; //得到傳遞過來的節點對象的值 if(!usernameRegex.test(username)){ //驗證是否符合節點對應的正則表達式 byId("username_span").style.color = "red"; //不符合，相應內容變成紅色 }else{ byId("username_span").style.color = "green"; //符合，相應內容變成綠色 } } function checkPassword(node){ //當鼠標離開節點時調用此方法，驗證節點內容是否符合注冊規范 //校驗密碼 var password1 = node.value; //alert("111"); if (!passwordRegex.test(password)) { byId("password1_span").style.color = "red"; } else { byId("password1_span").style.color = "green"; } } function checkRePassword(node){ //當鼠標離開節點時調用此方法，驗證節點內容是否符合注冊規范 //確認密碼 var rePassword = node.value; var password = byId("password2").value; //alert(repassword+"***"+password); if(!password==rePassword){ byId("rePassword2_span").style.color = "red"; }else if(!passwordRegex.test(rePassword)){ byId("rePassword2_span").style.color = "red"; }else{ byId("rePassword2_span").style.color = "green"; } } function checkEmail(node){ //當鼠標離開節點時調用此方法，驗證節點內容是否符合注冊規范 //校驗郵箱 var email = node.value; if(!emailRegex.test(email)){ byId("email_span").style.color = "red"; }else{ byId("email_span").style.color = "green"; } }