平时都专注于后台功能的实现和逻辑需求的分析及数据库方面的设计，很少关注前端的设计，而项目开发过程中专门负责后台是不太可能的事，所以前端我们也需要会用，除了漂亮的首页等其他的交给美工来做，一些功能性的东西还是有负责模块开发的人来完成，所以除了后台、数据库外，前端也需要开发人员懂其一二。

例子1

用户注册校验

用户注册jsp页面

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4. <html>
  5. <head>
  6. <title>注册页面</title>
  7. <meta http-equiv="pragma" content="no-cache">
  8. <meta http-equiv="cache-control" content="no-cache">
  9. <meta http-equiv="expires" content="0">
  10. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  11. <meta http-equiv="description" content="This is my page">
  12. <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>">
  13. <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
  14. <script type="text/javascript" src="<c:url value='/jsps/js/user/regist.js'/>"></script>
  15. </head>
  16. <body>
  17. <div id="divMain">
  18. <div id="divTitle">
  19. <span id="spanTitle">新用户注册</span>
  20. </div>
  21. <div id="divBody">
  22. <form action="<c:url value='/UserServlet'/>" method="post" id="registForm">
  23. <input type="hidden" name="method" value="regist"/>
  24. <table id="tableForm">
  25. <tr>
  26. <td class="tdText">用户名：</td>
  27. <td class="tdInput">
  28. <input class="inputClass" type="text" name="loginname" id="loginname" value="${form.loginname }"/>
  29. </td>
  30. <td class="tdError">
  31. <label class="errorClass" id="loginnameError">${errors.loginname }</label>
  32. </td>
  33. </tr>
  34. <tr>
  35. <td class="tdText">登录密码：</td>
  36. <td>
  37. <input class="inputClass" type="password" name="loginpass" id="loginpass" value="${form.loginpass }"/>
  38. </td>
  39. <td>
  40. <label class="errorClass" id="loginpassError">${errors.loginpass }</label>
  41. </td>
  42. </tr>
  43. <tr>
  44. <td class="tdText">确认密码：</td>
  45. <td>
  46. <input class="inputClass" type="password" name="reloginpass" id="reloginpass" value="${form.reloginpass }"/>
  47. </td>
  48. <td>
  49. <label class="errorClass" id="reloginpassError">${errors.reloginpass}</label>
  50. </td>
  51. </tr>
  52. <tr>
  53. <td class="tdText">Email：</td>
  54. <td>
  55. <input class="inputClass" type="text" name="email" id="email" value="${form.email }"/>
  56. </td>
  57. <td>
  58. <label class="errorClass" id="emailError">${errors.email}</label>
  59. </td>
  60. </tr>
  61. <tr>
  62. <td class="tdText">验证码：</td>
  63. <td>
  64. <input class="inputClass" type="text" name="verifyCode" id="verifyCode" value="${form.verifyCode }"/>
  65. </td>
  66. <td>
  67. <label class="errorClass" id="verifyCodeError">${errors.verifyCode}</label>
  68. </td>
  69. </tr>
  70. <tr>
  71. <td></td>
  72. <td>
  73. <div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"/></div>
  74. </td>
  75. <td>
  76. <label><a href="javascript:_hyz()">换一张</a></label>
  77. </td>
  78. </tr>
  79. <tr>
  80. <td></td>
  81. <td>
  82. <input type="image" src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/>
  83. </td>
  84. <td>
  85. <label></label>
  86. </td>
  87. </tr>
  88. </table>
  89. </form>
  90. </div>
  91. </div>
  92. </body>
  93. </html>

用户注册校验js

  1. $(function() {
  2. /*
  3. * 1. 得到所有的错误信息，循环遍历之。调用一个方法来确定是否显示错误信息！
  4. */
  5. $(".errorClass").each(function() {
  6. showError($(this));//遍历每个元素，使用每个元素来调用showError方法
  7. });
  8. /*
  9. * 2. 切换注册按钮的图片
  10. */
  11. $("#submitBtn").hover(
  12. function() {
  13. $("#submitBtn").attr("src", "/goods/images/regist2.jpg");
  14. },
  15. function() {
  16. $("#submitBtn").attr("src", "/goods/images/regist1.jpg");
  17. }
  18. );
  19. /*
  20. * 3. 输入框得到焦点隐藏错误信息
  21. */
  22. $(".inputClass").focus(function() {
  23. var labelId = $(this).attr("id") + "Error";//通过输入框找到对应的label的id
  24. $("#" + labelId).text("");//把label的内容清空！
  25. showError($("#" + labelId));//隐藏没有信息的label
  26. });
  27. /*
  28. * 4. 输入框失去焦点进行校验
  29. */
  30. $(".inputClass").blur(function() {
  31. var id = $(this).attr("id");//获取当前输入框的id
  32. var funName = "validate" + id.substring(0,1).toUpperCase() + id.substring(1) + "()";//得到对应的校验函数名
  33. eval(funName);//执行函数调用
  34. });
  35. /*
  36. * 5. 表单提交时进行校验
  37. */
  38. $("#registForm").submit(function() {
  39. var bool = true;//表示校验通过
  40. if(!validateLoginname()) {
  41. bool = false;
  42. }
  43. if(!validateLoginpass()) {
  44. bool = false;
  45. }
  46. if(!validateReloginpass()) {
  47. bool = false;
  48. }
  49. if(!validateEmail()) {
  50. bool = false;
  51. }
  52. if(!validateVerifyCode()) {
  53. bool = false;
  54. }
  55. return bool;
  56. });
  57. });
  58. /*
  59. * 登录名校验方法
  60. */
  61. function validateLoginname() {
  62. var id = "loginname";
  63. var value = $("#" + id).val();//获取输入框内容
  64. /*
  65. * 1. 非空校验
  66. */
  67. if(!value) {
  68. /*
  69. * 获取对应的label
  70. * 添加错误信息
  71. * 显示label
  72. */
  73. $("#" + id + "Error").text("用户名不能为空！");
  74. showError($("#" + id + "Error"));
  75. return false;
  76. }
  77. /*
  78. * 2. 长度校验
  79. */
  80. if(value.length < 3 || value.length > 20) {
  81. /*
  82. * 获取对应的label
  83. * 添加错误信息
  84. * 显示label
  85. */
  86. $("#" + id + "Error").text("用户名长度必须在3 ~ 20之间！");
  87. showError($("#" + id + "Error"));
  88. false;
  89. }
  90. /*
  91. * 3. 是否注册校验
  92. */
  93. $.ajax({
  94. url:"/goods/UserServlet",//要请求的servlet
  95. data:{method:"ajaxValidateLoginname", loginname:value},//给服务器的参数
  96. type:"POST",
  97. dataType:"json",
  98. async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。
  99. cache:false,
  100. success:function(result) {
  101. if(!result) {//如果校验失败
  102. $("#" + id + "Error").text("用户名已被注册！");
  103. showError($("#" + id + "Error"));
  104. return false;
  105. }
  106. }
  107. });
  108. return true;
  109. }
  110. /*
  111. * 登录密码校验方法
  112. */
  113. function validateLoginpass() {
  114. var id = "loginpass";
  115. var value = $("#" + id).val();//获取输入框内容
  116. /*
  117. * 1. 非空校验
  118. */
  119. if(!value) {
  120. /*
  121. * 获取对应的label
  122. * 添加错误信息
  123. * 显示label
  124. */
  125. $("#" + id + "Error").text("密码不能为空！");
  126. showError($("#" + id + "Error"));
  127. return false;
  128. }
  129. /*
  130. * 2. 长度校验
  131. */
  132. if(value.length < 3 || value.length > 20) {
  133. /*
  134. * 获取对应的label
  135. * 添加错误信息
  136. * 显示label
  137. */
  138. $("#" + id + "Error").text("密码长度必须在3 ~ 20之间！");
  139. showError($("#" + id + "Error"));
  140. false;
  141. }
  142. return true;
  143. }
  144. /*
  145. * 确认密码校验方法
  146. */
  147. function validateReloginpass() {
  148. var id = "reloginpass";
  149. var value = $("#" + id).val();//获取输入框内容
  150. /*
  151. * 1. 非空校验
  152. */
  153. if(!value) {
  154. /*
  155. * 获取对应的label
  156. * 添加错误信息
  157. * 显示label
  158. */
  159. $("#" + id + "Error").text("确认密码不能为空！");
  160. showError($("#" + id + "Error"));
  161. return false;
  162. }
  163. /*
  164. * 2. 两次输入是否一致校验
  165. */
  166. if(value != $("#loginpass").val()) {
  167. /*
  168. * 获取对应的label
  169. * 添加错误信息
  170. * 显示label
  171. */
  172. $("#" + id + "Error").text("两次输入不一致！");
  173. showError($("#" + id + "Error"));
  174. false;
  175. }
  176. return true;
  177. }
  178. /*
  179. * Email校验方法
  180. */
  181. function validateEmail() {
  182. var id = "email";
  183. var value = $("#" + id).val();//获取输入框内容
  184. /*
  185. * 1. 非空校验
  186. */
  187. if(!value) {
  188. /*
  189. * 获取对应的label
  190. * 添加错误信息
  191. * 显示label
  192. */
  193. $("#" + id + "Error").text("Email不能为空！");
  194. showError($("#" + id + "Error"));
  195. return false;
  196. }
  197. /*
  198. * 2. Email格式校验
  199. */
  200. if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) {
  201. /*
  202. * 获取对应的label
  203. * 添加错误信息
  204. * 显示label
  205. */
  206. $("#" + id + "Error").text("错误的Email格式！");
  207. showError($("#" + id + "Error"));
  208. false;
  209. }
  210. /*
  211. * 3. 是否注册校验
  212. */
  213. $.ajax({
  214. url:"/goods/UserServlet",//要请求的servlet
  215. data:{method:"ajaxValidateEmail", email:value},//给服务器的参数
  216. type:"POST",
  217. dataType:"json",
  218. async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。
  219. cache:false,
  220. success:function(result) {
  221. if(!result) {//如果校验失败
  222. $("#" + id + "Error").text("Email已被注册！");
  223. showError($("#" + id + "Error"));
  224. return false;
  225. }
  226. }
  227. });
  228. return true;
  229. }
  230. /*
  231. * 验证码校验方法
  232. */
  233. function validateVerifyCode() {
  234. var id = "verifyCode";
  235. var value = $("#" + id).val();//获取输入框内容
  236. /*
  237. * 1. 非空校验
  238. */
  239. if(!value) {
  240. /*
  241. * 获取对应的label
  242. * 添加错误信息
  243. * 显示label
  244. */
  245. $("#" + id + "Error").text("验证码不能为空！");
  246. showError($("#" + id + "Error"));
  247. return false;
  248. }
  249. /*
  250. * 2. 长度校验
  251. */
  252. if(value.length != 4) {
  253. /*
  254. * 获取对应的label
  255. * 添加错误信息
  256. * 显示label
  257. */
  258. $("#" + id + "Error").text("错误的验证码！");
  259. showError($("#" + id + "Error"));
  260. false;
  261. }
  262. /*
  263. * 3. 是否正确
  264. */
  265. $.ajax({
  266. url:"/goods/UserServlet",//要请求的servlet
  267. data:{method:"ajaxValidateVerifyCode", verifyCode:value},//给服务器的参数
  268. type:"POST",
  269. dataType:"json",
  270. async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。
  271. cache:false,
  272. success:function(result) {
  273. if(!result) {//如果校验失败
  274. $("#" + id + "Error").text("验证码错误！");
  275. showError($("#" + id + "Error"));
  276. return false;
  277. }
  278. }
  279. });
  280. return true;
  281. }
  282. /*
  283. * 判断当前元素是否存在内容，如果存在显示，不页面不显示！
  284. */
  285. function showError(ele) {
  286. var text = ele.text();//获取元素的内容
  287. if(!text) {//如果没有内容
  288. ele.css("display", "none");//隐藏元素
  289. } else {//如果有内容
  290. ele.css("display", "");//显示元素
  291. }
  292. }
  293. /*
  294. * 换一张验证码
  295. */
  296. function _hyz() {
  297. /*
  298. * 1. 获取<img>元素
  299. * 2. 重新设置它的src
  300. * 3. 使用毫秒来添加参数
  301. */
  302. $("#imgVerifyCode").attr("src", "/goods/VerifyCodeServlet?a=" + new Date().getTime());
  303. }

例子2

用户登录校验

用户登录jsp

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4. <html>
  5. <head>
  6. <title>登录</title>
  7. <meta http-equiv="pragma" content="no-cache">
  8. <meta http-equiv="cache-control" content="no-cache">
  9. <meta http-equiv="expires" content="0">
  10. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  11. <meta http-equiv="description" content="This is my page">
  12. <meta http-equiv="content-type" content="text/html;charset=utf-8">
  13. <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/login.css'/>">
  14. <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
  15. <script type="text/javascript" src="<c:url value='/jsps/js/user/login.js'/>"></script>
  16. <script src="<c:url value='/js/common.js'/>"></script>
  17. <script type="text/javascript">
  18. $(function() {/*Map<String(Cookie名称),Cookie(Cookie本身)>*/
  19. // 获取cookie中的用户名
  20. var loginname = window.decodeURI("${cookie.loginname.value}");
  21. if("${requestScope.user.loginname}") {
  22. loginname = "${requestScope.user.loginname}";
  23. }
  24. $("#loginname").val(loginname);
  25. });
  26. </script>
  27. </head>
  28. <body>
  29. <div class="main">
  30. <div><img src="<c:url value='/images/logo.gif'/>" /></div>
  31. <div>
  32. <div class="imageDiv"><img class="img" src="<c:url value='/images/zj.png'/>"/></div>
  33. <div class="login1">
  34. <div class="login2">
  35. <div class="loginTopDiv">
  36. <span class="loginTop">传智会员登录</span>
  37. <span>
  38. <a href="<c:url value='/jsps/user/regist.jsp'/>" class="registBtn"></a>
  39. </span>
  40. </div>
  41. <div>
  42. <form target="_top" action="<c:url value='/UserServlet'/>" method="post" id="loginForm">
  43. <input type="hidden" name="method" value="login" />
  44. <table>
  45. <tr>
  46. <td width="50"></td>
  47. <td><label class="error" id="msg">${msg }</label></td>
  48. </tr>
  49. <tr>
  50. <td width="50">用户名</td>
  51. <td><input class="input" type="text" name="loginname" id="loginname"/></td>
  52. </tr>
  53. <tr>
  54. <td height="20"> </td>
  55. <td><label id="loginnameError" class="error"></label></td>
  56. </tr>
  57. <tr>
  58. <td>密　码</td>
  59. <td><input class="input" type="password" name="loginpass" id="loginpass" value="${user.loginpass }"/></td>
  60. </tr>
  61. <tr>
  62. <td height="20"> </td>
  63. <td><label id="loginpassError" class="error"></label></td>
  64. </tr>
  65. <tr>
  66. <td>验证码</td>
  67. <td>
  68. <input class="input yzm" type="text" name="verifyCode" id="verifyCode" value="${user.verifyCode }"/>
  69. <img id="vCode" src="<c:url value='/VerifyCodeServlet'/>"/>
  70. <a id="verifyCode">换张图</a>
  71. </td>
  72. </tr>
  73. <tr>
  74. <td height="20px"> </td>
  75. <td><label id="verifyCodeError" class="error"></label></td>
  76. </tr>
  77. <tr>
  78. <td> </td>
  79. <td align="left">
  80. <input type="image" id="submit" src="<c:url value='/images/login1.jpg'/>" class="loginBtn"/>
  81. </td>
  82. </tr>
  83. </table>
  84. </form>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. </body>
  91. </html>

用户登录校验js

  1. <span style="font-size:18px;">$(function() {
  2. /*
  3. * 1. 让登录按钮在得到和失去焦点时切换图片
  4. */
  5. $("#submit").hover(
  6. function() {
  7. $("#submit").attr("src", "/goods/images/login2.jpg");
  8. },
  9. function() {
  10. $("#submit").attr("src", "/goods/images/login1.jpg");
  11. }
  12. );
  13. /*
  14. * 2. 给注册按钮添加submit()事件，完成表单校验
  15. */
  16. $("#submit").submit(function(){
  17. $("#msg").text("");
  18. var bool = true;
  19. $(".input").each(function() {
  20. var inputName = $(this).attr("name");
  21. if(!invokeValidateFunction(inputName)) {
  22. bool = false;
  23. }
  24. });
  25. return bool;
  26. });
  27. /*
  28. * 3. 输入框得到焦点时隐藏错误信息
  29. */
  30. $(".input").focus(function() {
  31. var inputName = $(this).attr("name");
  32. $("#" + inputName + "Error").css("display", "none");
  33. });
  34. /*
  35. * 4. 输入框推动焦点时进行校验
  36. */
  37. $(".input").blur(function() {
  38. var inputName = $(this).attr("name");
  39. invokeValidateFunction(inputName);
  40. })
  41. });
  42. /*
  43. * 输入input名称，调用对应的validate方法。
  44. * 例如input名称为：loginname，那么调用validateLoginname()方法。
  45. */
  46. function invokeValidateFunction(inputName) {
  47. inputName = inputName.substring(0, 1).toUpperCase() + inputName.substring(1);
  48. var functionName = "validate" + inputName;
  49. return eval(functionName + "()");
  50. }
  51. /*
  52. * 校验登录名
  53. */
  54. function validateLoginname() {
  55. var bool = true;
  56. $("#loginnameError").css("display", "none");
  57. var value = $("#loginname").val();
  58. if(!value) {// 非空校验
  59. $("#loginnameError").css("display", "");
  60. $("#loginnameError").text("用户名不能为空！");
  61. bool = false;
  62. } else if(value.length < 3 || value.length > 20) {//长度校验
  63. $("#loginnameError").css("display", "");
  64. $("#loginnameError").text("用户名长度必须在3 ~ 20之间！");
  65. bool = false;
  66. }
  67. return bool;
  68. }
  69. /*
  70. * 校验密码
  71. */
  72. function validateLoginpass() {
  73. var bool = true;
  74. $("#loginpassError").css("display", "none");
  75. var value = $("#loginpass").val();
  76. if(!value) {// 非空校验
  77. $("#loginpassError").css("display", "");
  78. $("#loginpassError").text("密码不能为空！");
  79. bool = false;
  80. } else if(value.length < 3 || value.length > 20) {//长度校验
  81. $("#loginpassError").css("display", "");
  82. $("#loginpassError").text("密码长度必须在3 ~ 20之间！");
  83. bool = false;
  84. }
  85. return bool;
  86. }
  87. /*
  88. * 校验验证码
  89. */
  90. function validateVerifyCode() {
  91. var bool = true;
  92. $("#verifyCodeError").css("display", "none");
  93. var value = $("#verifyCode").val();
  94. if(!value) {//非空校验
  95. $("#verifyCodeError").css("display", "");
  96. $("#verifyCodeError").text("验证码不能为空！");
  97. bool = false;
  98. } else if(value.length != 4) {//长度不为4就是错误的
  99. $("#verifyCodeError").css("display", "");
  100. $("#verifyCodeError").text("错误的验证码！");
  101. bool = false;
  102. } else {//验证码是否正确
  103. $.ajax({
  104. cache: false,
  105. async: false,
  106. type: "POST",
  107. dataType: "json",
  108. data: {method: "ajaxValidateVerifyCode", verifyCode: value},
  109. url: "/goods/UserServlet",
  110. success: function(flag) {
  111. if(!flag) {
  112. $("#verifyCodeError").css("display", "");
  113. $("#verifyCodeError").text("错误的验证码！");
  114. bool = false;
  115. }
  116. }
  117. });
  118. }
  119. return bool;
  120. }</span>

例子3

用户修改密码校验

用户修改密码jsp

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4. <html>
  5. <head>
  6. <title>pwd.jsp</title>
  7. <meta http-equiv="pragma" content="no-cache">
  8. <meta http-equiv="cache-control" content="no-cache">
  9. <meta http-equiv="expires" content="0">
  10. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  11. <meta http-equiv="description" content="This is my page">
  12. <!--
  13. <link rel="stylesheet" type="text/css" href="styles.css">
  14. -->
  15. <link rel="stylesheet" type="text/css" href="<c:url value='/css/css.css'/>">
  16. <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/pwd.css'/>">
  17. <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
  18. <script type="text/javascript" src="<c:url value='/jsps/js/user/pwd.js'/>"></script>
  19. <script src="<c:url value='/js/common.js'/>"></script>
  20. </head>
  21. <body>
  22. <div class="div0">
  23. <span>修改密码</span>
  24. </div>
  25. <div class="div1">
  26. <form action="<c:url value='/UserServlet'/>" method="post" target="_top">
  27. <input type="hidden" name="method" value="updatePassword"/>
  28. <table>
  29. <tr>
  30. <td><label class="error">${msg }</label></td>
  31. <td colspan="2"> </td>
  32. </tr>
  33. <tr>
  34. <td align="right">原密码:</td>
  35. <td><input class="input" type="password" name="loginpass" id="loginpass" value="${user.loginpass }"/></td>
  36. <td><label id="loginpassError" class="error"></label></td>
  37. </tr>
  38. <tr>
  39. <td align="right">新密码:</td>
  40. <td><input class="input" type="password" name="newpass" id="newpass" value="${user.newpass }""/></td>
  41. <td><label id="newpassError" class="error"></label></td>
  42. </tr>
  43. <tr>
  44. <td align="right">确认密码:</td>
  45. <td><input class="input" type="password" name="reloginpass" id="reloginpass" value="${user.reloginpass }""/></td>
  46. <td><label id="reloginpassError" class="error"></label></td>
  47. </tr>
  48. <tr>
  49. <td align="right"></td>
  50. <td>
  51. <img id="vCode" src="<c:url value='/VerifyCodeServlet'/>" border="1"/>
  52. <a href="javascript:_change();">看不清，换一张</a>
  53. </td>
  54. </tr>
  55. <tr>
  56. <td align="right">验证码:</td>
  57. <td>
  58. <input class="input" type="text" name="verifyCode" id="verifyCode" value="${user.verifyCode }""/>
  59. </td>
  60. <td><label id="verifyCodeError" class="error"></label></td>
  61. </tr>
  62. <tr>
  63. <td align="right"></td>
  64. <td><input id="submit" type="submit" value="修改密码"/></td>
  65. </tr>
  66. </table>
  67. </form>
  68. </div>
  69. </body>
  70. </html>

用户修改密码校验js

    1. $(function() {
    2. /*
    3. * 1. 给注册按钮添加submit()事件，完成表单校验
    4. */
    5. $("#submit").submit(function(){
    6. $("#msg").text("");
    7. var bool = true;
    8. $(".input").each(function() {
    9. var inputName = $(this).attr("name");
    10. if(!invokeValidateFunction(inputName)) {
    11. bool = false;
    12. }
    13. });
    14. return bool;
    15. });
    16. /*
    17. * 3. 输入框推动焦点时进行校验
    18. */
    19. $(".input").blur(function() {
    20. var inputName = $(this).attr("name");
    21. invokeValidateFunction(inputName);
    22. });
    23. });
    24. /*
    25. * 输入input名称，调用对应的validate方法。
    26. * 例如input名称为：loginname，那么调用validateLoginname()方法。
    27. */
    28. function invokeValidateFunction(inputName) {
    29. inputName = inputName.substring(0, 1).toUpperCase() + inputName.substring(1);
    30. var functionName = "validate" + inputName;
    31. return eval(functionName + "()");
    32. }
    33. /*
    34. * 校验密码
    35. */
    36. function validateLoginpass() {
    37. var bool = true;
    38. $("#loginpassError").css("display", "none");
    39. var value = $("#loginpass").val();
    40. if(!value) {// 非空校验
    41. $("#loginpassError").css("display", "");
    42. $("#loginpassError").text("密码不能为空！");
    43. bool = false;
    44. } else if(value.length < 3 || value.length > 20) {//长度校验
    45. $("#loginpassError").css("display", "");
    46. $("#loginpassError").text("密码长度必须在3 ~ 20之间！");
    47. bool = false;
    48. });
    49. return bool;
    50. }
    51. // 校验新密码
    52. function validateNewpass() {
    53. var bool = true;
    54. $("#newpassError").css("display", "none");
    55. var value = $("#newpass").val();
    56. if(!value) {// 非空校验
    57. $("#newpassError").css("display", "");
    58. $("#newpassError").text("新密码不能为空！");
    59. bool = false;
    60. } else if(value.length < 3 || value.length > 20) {//长度校验
    61. $("#newpassError").css("display", "");
    62. $("#newpassError").text("新密码长度必须在3 ~ 20之间！");
    63. bool = false;
    64. }
    65. return bool;
    66. }
    67. /*
    68. * 校验确认密码
    69. */
    70. function validateReloginpass() {
    71. var bool = true;
    72. $("#reloginpassError").css("display", "none");
    73. var value = $("#reloginpass").val();
    74. if(!value) {// 非空校验
    75. $("#reloginpassError").css("display", "");
    76. $("#reloginpassError").text("确认密码不能为空！");
    77. bool = false;
    78. } else if(value != $("#newpass").val()) {//两次输入是否一致
    79. $("#reloginpassError").css("display", "");
    80. $("#reloginpassError").text("两次密码输入不一致！");
    81. bool = false;
    82. }
    83. return bool;
    84. }
    85. /*
    86. * 校验验证码
    87. */
    88. function validateVerifyCode() {
    89. var bool = true;
    90. $("#verifyCodeError").css("display", "none");
    91. var value = $("#verifyCode").val();
    92. if(!value) {//非空校验
    93. $("#verifyCodeError").css("display", "");
    94. $("#verifyCodeError").text("验证码不能为空！");
    95. bool = false;
    96. } else if(value.length != 4) {//长度不为4就是错误的
    97. $("#verifyCodeError").css("display", "");
    98. $("#verifyCodeError").text("错误的验证码！");
    99. bool = false;
    100. } else {//验证码是否正确
    101. $.ajax({
    102. cache: false,
    103. async: false,
    104. type: "POST",
    105. dataType: "json",
    106. data: {method: "ajaxValidateVerifyCode", verifyCode: value},
    107. url: "/goods/UserServlet",
    108. success: function(flag) {
    109. if(!flag) {
    110. $("#verifyCodeError").css("display", "");
    111. $("#verifyCodeError").text("错误的验证码！");
    112. bool = false;
    113. }
    114. }
    115. });
    116. }
    117. return bool;
    118. }

js经典校验之注册与登录校验的更多相关文章

  1. 【koa2】用户注册、登录校验与加盐加密

    加密与解密 先介绍一下关于服务端用户名跟密码的存储状态,我们知道当前端在注册一个新用户时,会在表单内填入用户名和密码,并通过post请求提交到服务器,服务器再把用户名和密码从ctx.request.b ...

  2. Spring Security 登录校验 源码解析

    传统情况下,在过滤器中做权限验证,Spring Secuirty也是在Filter中进行权限验证. 创建并注册过滤器 package com.awizdata.edubank.config; impo ...

  3. vue.js基础知识篇(7):表单校验详解

    目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...

  4. JavaWeb_day02_登录校验_查询所有员工信息_DeBug

    本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! WEB_day02 servlet 协议转对象 服务器 ...

  5. 原生js验证简洁美观注册登录页面

    序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 sign_up.html 注册表单 <!DOCTYPE html> <html lang=&qu ...

  6. Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...

  7. MVC登录校验

    利用MVC自带的过滤器可现实简单的登录校验 在项目目录下创建一个BaseController控制器,让需要验证的控制器继承这个BaseController 需要让BaseController继承Con ...

  8. vue-router登录校验后跳转到之前指定页面如何实现

    两个需求:1.用户点击购买需要下单,并跳转到订单页面,但是如果用户没有登录的话,中间有登录验证,会拦截:2.点击购买的时候,登录校验成功了,跳转到订单页面时,订单已创建,去付款即可.3.处理拦截至登录 ...

  9. node.js+mysql用户的注册登录验证

    下面代码实现的功能是:用node.js连接mysql实现用户的注册和登录,这里主要实现的是后端的验证代码,前端显示部分没具体写出. 整个程序的流程是这样的: 1.首先建立数据库reji,数据表user ...

随机推荐

  1. Extjs4 desktop 图标自动换行,横纵排列 图标大小修改

    一.图标换行 /*! * Ext JS Library 4.0 * Copyright(c) 2006-2011 Sencha Inc. * licensing@sencha.com * http:/ ...

  2. MS-coco数据集下载及使用（转）

    先做个标记,改天研究下. 几个链接: MS coco数据集介绍及下载 Microsoft COCO 数据集 COCO Dataset 数据特点 COCO 数据集的使用

  3. 表单修饰符.lazy.number.trim

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  4. HTML 项目符号

    无序符号 <ul> <li> </li> <li> </li> <li> </li> </ul> 属性 ...

  5. topology进程结束会不会关闭数据库连接

    测试环境:redhat,oracle 11.2.0.3.0 测试目标:当java进程关闭之后,进程的数据库连接会不会被释放,何时被释放 实验证明:在运行topology前,执行 select coun ...

  6. java基础之二维数组不定义列数

    有一种特殊的二维数组,它的行数确定,但是每行的列数不确定.这样的的数组实现方法:先创建制定行数,列数缺省的二维数组,然后对数组的每一行重新初始化.举例如下: package day5; //第二种定义 ...

  7. 【机器学习】机器学习入门01 - kNN算法

    0. 写在前面 近日加入了一个机器学习的学习小组,每周按照学习计划学习一个机器学习的小专题.笔者恰好近来计划深入学习Python,刚刚熟悉了其基本的语法知识(主要是与C系语言的差别),决定以此作为对P ...

  8. 新浪新闻API

    新浪新闻API ustcmio 关注 2017.01.15 20:44* 字数 536 阅读 2479评论 2喜欢 7 新浪新闻的API:1.访问手机新浪网https://sina.cn/?from= ...

  9. Cesium官方教程5--地形图层

    原文地址:https://cesiumjs.org/tutorials/Terrain-Tutorial/ Cesium支持渐进流式加载和渲染全球高精度地形,并且包含海.湖.河等水面效果.相对2D地图 ...

  10. PAT甲级——A1028 List Sorting

    Excel can sort records according to any column. Now you are supposed to imitate this function. Input ...