getPassword-mobile.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <!DOCTYPE html>
  2. <html lang=zh-cn>
  3. <head>
  4. <meta charset=utf-8>
  5. <title>注册纵横通行帐号</title>
  6. <meta name=description content=一个帐号通用纵横旗下所有网络产品。>
  7. <meta name=copyright content=smartcost.com.cn>
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  9. <link rel=stylesheet href={{rootUrl_CSS}}global.css>
  10. <script src={{rootUrl_JS}}jquery-1.7.1.min.js></script>
  11. <script src={{rootUrl_JS}}global.js></script>
  12. <script src={{rootUrl_JS}}jquery.validate.min.js></script>
  13. <script type="text/javascript">
  14. $(function(){
  15. jQuery.validator.addMethod("isMobile", function(value, element) {
  16. var length = value.length;
  17. var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1}))+\d{8})$/;
  18. return this.optional(element) || (length == 11 && mobile.test(value));
  19. }, "请正确填写您的手机号码");
  20. $("#getpasswdbyphone").validate({
  21. rules: {
  22. zhmobile:{
  23. required: true,
  24. isMobile: true,
  25. remote: {
  26. url: '{{rootUrl}}checkphone',
  27. type: 'POST',
  28. dateType: 'json',
  29. data: {
  30. zhmobile: function () {
  31. return $('#zhmobile').val();
  32. }
  33. }
  34. }
  35. },
  36. zhsmscode: {
  37. required: true,
  38. isCode: true,
  39. remote: {
  40. url: '{{rootUrl}}check',
  41. type: 'POST',
  42. dateType: 'json',
  43. data: {
  44. zhsmscode: function () {
  45. return $('#zhsmscode').val();
  46. },
  47. zhmobile: function () {
  48. return $('#zhmobile').val();
  49. }
  50. }
  51. }
  52. }
  53. },
  54. messages: {
  55. zhmobile:{
  56. required: "请输入手机号",
  57. remote: "该手机号码未在纵横通行账号注册!"
  58. },
  59. zhsmscode: {
  60. required: "请输入验证码",
  61. remote: "验证码过期或不一致,请重新获取"
  62. }
  63. },
  64. errorElement: "span",// 错误信息容器标签
  65. errorClass: "textError",
  66. validClass: "inputSus",
  67. onkeyup: false
  68. })
  69. });
  70. </script>
  71. </head>
  72. <body>
  73. <!--<h2 class="mobileTop">找回密码</h2>-->
  74. <div class="mobileRe">
  75. <!-- <h3 class="mobileTopImg"><img src="images/mainlogo.png"></h3> -->
  76. <div class="trainFormItem">
  77. <div class="formEntry">
  78. <form method="post" name="getpasswdbyphone" id="getpasswdbyphone" action="/mobile/setpasswd">
  79. <dl class="regForm">
  80. <dt>请输入您的手机号码</dt>
  81. <dd>
  82. <input type="text" class="inputText" id="zhmobile" name="zhmobile" placeholder="请输入您的手机号码">
  83. </dd>
  84. </dl>
  85. <dl class="regForm codem" style="display: none">
  86. <dt>短信验证码</dt>
  87. <dd>
  88. <input type="text" class="inputText" name="zhsmscode" id="zhsmscode" style="width:45%;" placeholder="校验码是6位数字">
  89. <input type="button" class="btnTextMod btnTextOne" id="codebtn" name="codebtn" value="点击发送验证码" onclick="checkAndSend(this)" >
  90. </dd>
  91. </dl>
  92. <dl class="regForm" id="sendcode">
  93. <dd class="clearfix"><br><br><input class="button btn-green btnMobile" type="button" name="regmsubmit" value="点击发送验证码" onclick="checkAndSend($('#codebtn')[0])"><!-- if isset({{messages}}) --><p class="textError">{{messages}}</p><!-- endif --></dd>
  94. </dl>
  95. <dl class="regForm codem" style="display: none">
  96. <dd class="clearfix"><br><br><input class="button btn-green btnMobile" type="submit" id="regmsubmit" name="regmsubmit" value="设置新密码"></dd>
  97. </dl>
  98. </form>
  99. </div>
  100. </div>
  101. </div>
  102. <script type="text/javascript">
  103. var clock = '';
  104. var nums = 60;
  105. var btn;
  106. function checkAndSend(thisbtn){
  107. $('#zhmobile').removeClass('textError');
  108. if($('#zhmobile').siblings().hasClass('textError')){
  109. $('#zhmobile').siblings('.textError').remove();
  110. }
  111. var mobile = $('#zhmobile').val();
  112. if(mobile == ''){
  113. $('#zhmobile').addClass('textError');
  114. var span = '<span class="textError">请输入手机号</span>';
  115. $('#zhmobile').parent().append(span);
  116. return false;
  117. }else if(!mobile.match(/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1}))+\d{8})$/)){
  118. $('#zhmobile').addClass('textError');
  119. var span = '<span class="textError">请正确填写您的手机号码</span>';
  120. $('#zhmobile').parent().append(span);
  121. return false;
  122. }
  123. var flag = true;
  124. $.ajax({
  125. url: '{{rootUrl}}checkgetpwdsms',
  126. type: 'POST',
  127. dateType: 'json',
  128. async: false,
  129. data: {zhmobile:mobile},
  130. success: function (result) {
  131. var data = eval('('+result+')');
  132. if(data.code == -1){
  133. $('#zhmobile').addClass('textError');
  134. var span = '<span class="textError">'+data.msg+'</span>';
  135. $('#zhmobile').parent().append(span);
  136. flag = false;
  137. }else if(data.code == 1){
  138. flag = true;
  139. }
  140. }
  141. });
  142. if(!flag){
  143. return false;
  144. }
  145. $('#zhmobile').addClass('inputSus');
  146. $('.codem').show();
  147. $('#sendcode').hide();
  148. sendCode(thisbtn);
  149. }
  150. function sendCode(thisBtn)
  151. {
  152. btn = thisBtn;
  153. btn.disabled = true; //将按钮置为不可点击
  154. btn.value = nums+'秒后可重新获取';
  155. $('#codebtn').removeClass('btnTextOne').addClass('btnText');
  156. clock = setInterval(doLoop, 1000); //一秒执行一次
  157. }
  158. function doLoop()
  159. {
  160. nums--;
  161. if(nums > 0){
  162. btn.value = nums+'秒后可重新获取';
  163. }else{
  164. clearInterval(clock); //清除js定时器
  165. btn.disabled = false;
  166. btn.value = '点击发送验证码';
  167. $('#codebtn').removeClass('btnText').addClass('btnTextOne');
  168. nums = 60; //重置时间
  169. }
  170. }
  171. </script>
  172. </body>