js经典校验之注册与登录校验

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

例子1

用户注册校验

用户注册jsp页面

[html] view plain copy

  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

[html] view plain copy

  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_-])[email protected]([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

[html] view plain copy

  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

[html] view plain copy

  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

[html] view plain copy

  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

[html] view plain copy

    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. }

原文地址：https://www.cnblogs.com/gluncle/p/8485198.html

时间： 2024-08-28 09:23:26

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

【struts2+hibernate+spring项目实战】用户登录校验（struts拦截器）

一.概述 项目中所有页面均放入WEB-INF,所有页面安全性得到了很大程度的提高.但是当用户登录后长时间没有操作时,会造成Session数据的过期,如果此时获取Session中的数据,必定会引发WEB引用的空指针异常,造成数据错误,程序崩溃.因此需要一种机制保障每次发送请求执行Action中的方法之前校验用户是否处于登录状态.针对上述分析,可以选用两种实现方式.AOPAOP思想可以在任意方法执行前进行拦截,完成原始方法执行前的操作Struts2拦截器Struts2拦截器可以再Struts2的任意

再学ajax--第二天 | 基于php+mysql+ajax的表单注册、登录、注销

写在前面 ajax学习到了第二天,这次是用第一天封装的ajax函数,后端使用了php+mysql实现基本的注册,登录,注销. php是我前几个月get到的技能,我已经学习到了面向对象,知道各修饰符的含义,继承,接口,构造函数,实例化对象 mysql是跟php一块学的,学习了基本增删改查. ajax原理其实不难理解,最主要的就是XMLHttpRequest(ActiveXObject("Microsoft.XMLHTTP")):在理解该对象之后,最主要理解的是前后端数据的传递问题,我也是

【前端】Vue.js经典开源项目汇总

Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过

Vue.js经典开源项目汇总

Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过

Node.js开发入门—使用cookie保持登录

这次来做一个网站登录的小例子,后面会用到.这个示例会用到Cookie.HTML表单.POST数据体(body)解析. 第一个版本,我们的用户数据就写死在js文件里.第二个版本会引入MongoDB来保存用户数据. 示例准备 1. 使用express创建应用 就下面的命令序列: express LoginDemo cd LoginDemo npm install 2. 登录页面 登录页面的jade模板为login.jade,内容如下: doctype html html head meta(char

模板--------注册与登录_基于xml格式的存储

代码: 注册与登录_基于xml格式的存储.zip 功能: > 注册(带验证码) > 登录 ------------- JSP: * login.jsp  --> 登录表单 * regist.jsp --> 注册表单 * index.jsp -->  主页(只有登录成功才能看到) Servlet: * LoginServlet * RegistServlet Service: * UserService --> 与用户相关的业务类 Dao: * UserDao -->

注册与登录模板__dao没有实现

--------代码下载:注册与登录模板__dao没有实现.zip 功能: > 注册(带验证码) > 登录 ------ JSP: * login.jsp  --> 登录表单 * regist.jsp --> 注册表单 * index.jsp -->  主页(只有登录成功才能看到) Servlet: * LoginServlet * RegistServlet Service: * UserService --> 与用户相关的业务类 Dao: * UserDao --&

10天学会phpWeChat——第十天：phpWeChat的会员注册、登录以及微信网页开发

通过前面的系列教程,我们系统的讲解了phpWeChat从视图端.控制器端到模型端的操作流程:熟悉了phpWeChat的目录结构:掌握了视图端模板如何创建一个丰富的表单和模型端如何操作数据库.这一切都是传统Web以及现代H5开发的核心. 我们今天进行<10天学会phpWeChat>教程的最后一讲,phpWeChat的微信网页开发.在这一讲里,我们将重点讲解在微信网页开发中几个常见参数的获取和一个微信扫一扫的实例. 一.微信网页开发中的几个重要参数(文档参考:https://mp.weixin.q

（实用篇）php注册和登录界面的实现案例(原文转载学习中)

当初我觉得一个网站上注册和登录这两个功能很神奇,后来自己研究一下发现其实道理很简单,接下来看一下怎么实现的吧.... http://mp.weixin.qq.com/s?__biz=MzIxMDA0OTcxNA==&mid=2654254777&idx=1&sn=76f8b02e5fbcc7041c9e67b459558194&chksm=8caa9964bbdd10722309af194a7ad9d30023d41b71d6a56a57199b73b1d5d989ac50