regist.jsp 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>成员注册页面注册页面</title>
  7. <%--静态包含:base标签,css样式,js脚本--%>
  8. <%@ include file="/pages/common/head.jsp"%>
  9. <script type="text/javascript">
  10. //页面加载之后
  11. $(function (){
  12. //验证用户名是否可用
  13. $("#username").blur(function (){
  14. var username = this.value();
  15. $.getJSON("http://localhost:8089/TestServlet09_war_exploded/userServlet",
  16. "action=ajaxExistsUsername&username=" + username,
  17. function (data){
  18. if (data.existsUsername){
  19. $("span.errorMsg").text("用户名已存在");
  20. }else {
  21. $("span.errorMsg").text("用户名可用");
  22. }
  23. });
  24. });
  25. //验证码切换
  26. $("#code_img").click(function () {
  27. // 在事件响应的 function 函数中有一个 this 对象。这个 this 对象,是当前正在响应事件的 dom 对象
  28. // src 属性表示验证码 img 标签的 图片路径。它可读,可写
  29. // alert(this.src);
  30. this.src = "${basePath}kaptcha.jpg?d=" + new Date();
  31. });
  32. //给注册绑定单机事件
  33. $("#sub_btn").click(function () {
  34. /*
  35. 验证用户名,由字母数字下划线组成,长度5-12
  36. 验证密码:由字母数字下划线组成,长度5-12
  37. 验证确认密码,与密码一致
  38. 邮箱验证,xxxxx@xxx.com
  39. 验证码:只需验证用户有输入
  40. */
  41. //验证用户名,由字母数字下划线组成,长度5-12
  42. var usernameText = $("#username").val();
  43. var usernameAdd="admin";
  44. var usernamePatt = /^\w{5,12}$/;
  45. if (!usernamePatt.test(usernameText)){
  46. $("span.errorMsg").text("用户名格式错误");
  47. return false;
  48. }
  49. if (usernameText.toLowerCase().indexOf('admin') !== -1){
  50. $("span.errorMsg").text("用户名命名错误");
  51. return false;
  52. }
  53. //验证密码:由字母数字下划线组成,长度5-12
  54. var passwordText = $("#password").val();
  55. var passwordPatt = /^\w{5,12}$/;
  56. if (!passwordPatt.test(passwordText)){
  57. $("span.errorMsg").text("密码格式错误");
  58. return false;
  59. }
  60. //验证确认密码,与密码一致
  61. var repwdText = $("#repwd").val();
  62. if (repwdText != passwordText){
  63. $("span.errorMsg").text("请与密码保持一致");
  64. return false;
  65. }
  66. //邮箱验证,xxxxx@xxx.com
  67. var emailText = $("#email").val();
  68. var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
  69. if (!emailPatt.test(emailText)){
  70. $("span.errorMsg").text("邮箱格式错误");
  71. return false;
  72. }
  73. //验证码:只需验证用户有输入
  74. var codeText = $("#code").val();
  75. //去掉验证码的空格
  76. codeText = $.trim(codeText);
  77. if (codeText == null || codeText == ""){
  78. $("span.errorMsg").text("验证码不能为空");
  79. return false;
  80. }
  81. $("span.errorMsg").text("");
  82. });
  83. });
  84. </script>
  85. <style type="text/css">
  86. .login_form{
  87. height:420px;
  88. margin-top: 25px;
  89. }
  90. </style>
  91. </head>
  92. <body>
  93. <div id="login_header">
  94. <img class="logo_img" alt="" src="" >
  95. </div>
  96. <div class="login_banner">
  97. <div id="l_content">
  98. <span class="login_word">欢迎注册</span>
  99. </div>
  100. <div id="content">
  101. <div class="login_form">
  102. <div class="login_box">
  103. <div class="tit">
  104. <h1>注册成为会员</h1>
  105. <span class="errorMsg">
  106. <%-- <%=request.getAttribute("msg")==null?"":request.getAttribute("msg")%>--%>
  107. ${requestScope.msg}
  108. </span>
  109. </div>
  110. <div class="form">
  111. <form action="userServlet" method="post">
  112. <input type="hidden" name="action" value="regist">
  113. <label>用户名称:</label>
  114. <input class="itxt" type="text" placeholder="请输入用户名"
  115. value="${requestScope.username}"
  116. autocomplete="off" tabindex="1" name="username" id="username"/>
  117. <br />
  118. <br />
  119. <label>用户密码:</label>
  120. <input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" id="password" />
  121. <br />
  122. <br />
  123. <label>确认密码:</label>
  124. <input class="itxt" type="password" placeholder="确认密码" autocomplete="off" tabindex="1" name="repwd" id="repwd" />
  125. <br />
  126. <br />
  127. <label>电子邮件:</label>
  128. <input class="itxt" type="text" placeholder="请输入邮箱地址"
  129. value="${requestScope.email}"
  130. autocomplete="off" tabindex="1" name="email" id="email" />
  131. <br />
  132. <br />
  133. <label>验证码:</label>
  134. <input class="itxt" type="text" name="code" style="width: 80px;" id="code"/>
  135. <img alt="" src="kaptcha.jpg" style="float: right; margin-right: 40px; width: 110px;height: 30px" id="code_img">
  136. <br />
  137. <br />
  138. <input type="submit" value="注册" id="sub_btn" />
  139. </form>
  140. </div>
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. <%--静态包含:页脚--%>
  146. <%@include file="/pages/common/footer.jsp"%>
  147. </body>
  148. </html>