分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置：首页 > 网页技术

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

发布时间：2023-09-06 01:44责任编辑：白小东关键词：js

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

例子1

用户注册校验

用户注册jsp页面

[html]view plaincopy
  1. <%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
  2. <%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%>
  5. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
  6. <html>
  7. <head>
  8. <title>注册页面</title>
  10. <metahttp-equiv="pragma"content="no-cache">
  11. <metahttp-equiv="cache-control"content="no-cache">
  12. <metahttp-equiv="expires"content="0">
  13. <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
  14. <metahttp-equiv="description"content="Thisismypage">
  15. <linkrel="stylesheet"type="text/css"href="<c:urlvalue=‘/jsps/css/user/regist.css‘/>">
  16. <scripttype="text/javascript"src="<c:urlvalue=‘/jquery/jquery-1.5.1.js‘/>"></script>
  17. <scripttype="text/javascript"src="<c:urlvalue=‘/jsps/js/user/regist.js‘/>"></script>
  18. </head>
  20. <body>
  21. <div>
  22. <div>
  23. <span>新用户注册</span>
  24. </div>
  25. <div>
  26. <formaction="<c:urlvalue=‘/UserServlet‘/>"method="post">
  27. <inputtype="hidden"name="method"value="regist"/>
  28. <table>
  29. <tr>
  30. <td>用户名：</td>
  31. <td>
  32. <inputtype="text"name="loginname"value="${form.loginname}"/>
  33. </td>
  34. <td>
  35. <label>${errors.loginname}</label>
  36. </td>
  37. </tr>
  38. <tr>
  39. <td>登录密码：</td>
  40. <td>
  41. <inputtype="password"name="loginpass"value="${form.loginpass}"/>
  42. </td>
  43. <td>
  44. <label>${errors.loginpass}</label>
  45. </td>
  46. </tr>
  47. <tr>
  48. <td>确认密码：</td>
  49. <td>
  50. <inputtype="password"name="reloginpass"value="${form.reloginpass}"/>
  51. </td>
  52. <td>
  53. <label>${errors.reloginpass}</label>
  54. </td>
  55. </tr>
  56. <tr>
  57. <td>Email：</td>
  58. <td>
  59. <inputtype="text"name="email"value="${form.email}"/>
  60. </td>
  61. <td>
  62. <label>${errors.email}</label>
  63. </td>
  64. </tr>
  65. <tr>
  66. <td>验证码：</td>
  67. <td>
  68. <inputtype="text"name="verifyCode"value="${form.verifyCode}"/>
  69. </td>
  70. <td>
  71. <label>${errors.verifyCode}</label>
  72. </td>
  73. </tr>
  74. <tr>
  75. <td></td>
  76. <td>
  77. <div><imgsrc="<c:urlvalue=‘/VerifyCodeServlet‘/>"/></div>
  78. </td>
  79. <td>
  80. <label><ahref="javascript:_hyz()">换一张</a></label>
  81. </td>
  82. </tr>
  83. <tr>
  84. <td></td>
  85. <td>
  86. <inputtype="image"src="<c:urlvalue=‘/images/regist1.jpg‘/>"/>
  87. </td>
  88. <td>
  89. <label></label>
  90. </td>
  91. </tr>
  92. </table>
  93. </form>
  94. </div>
  95. </div>
  96. </body>
  97. </html>


用户注册校验js

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved