registerMobile.html 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  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. jQuery.validator.addMethod("isCode", function(value, element) {
  21. var length = value.length;
  22. var mobile = /^(\d{6})$/;
  23. return this.optional(element) || (length == 6 && mobile.test(value));
  24. }, "请正确填写验证码");
  25. $('#regmobileform').validate({
  26. rules: {
  27. zhmobile:{
  28. required: true,
  29. isMobile: true,
  30. remote: {
  31. url: '{{rootUrl}}check',
  32. type: 'POST',
  33. dateType: 'json',
  34. data: {
  35. zhmobile: function () {
  36. return $('#zhmobile').val();
  37. }
  38. }
  39. }
  40. },
  41. zhmpasswd: {
  42. required: true,
  43. minlength: 6,
  44. maxlength: 16
  45. },
  46. zhsmscode: {
  47. required: true,
  48. isCode: true,
  49. remote: {
  50. url: '{{rootUrl}}check',
  51. type: 'POST',
  52. dateType: 'json',
  53. data: {
  54. zhsmscode: function () {
  55. return $('#zhsmscode').val();
  56. },
  57. zhmobile: function () {
  58. return $('#zhmobile').val();
  59. }
  60. }
  61. }
  62. },
  63. zhmuser: {
  64. required: true,
  65. minlength: 3,
  66. maxlength: 18,
  67. remote: {
  68. url: '{{rootUrl}}check',
  69. type: 'POST',
  70. dateType: 'json',
  71. data: {
  72. zhmuser: function () {
  73. return $('#zhmuser').val();
  74. }
  75. }
  76. }
  77. }
  78. },
  79. messages: {
  80. zhmobile:{
  81. required: "请输入手机号",
  82. remote: "该手机号码已被注册!"
  83. },
  84. zhmpasswd:{
  85. required:"请输入密码",
  86. minlength: "密码长度不能小于6",
  87. maxlength: "密码长度不能大于16"
  88. },
  89. zhsmscode: {
  90. required: "请输入验证码",
  91. remote: "验证码过期或不一致,请重新获取"
  92. },
  93. zhmuser:{
  94. required:"请输入您的注册账户",
  95. minlength:"长度不能低于3个字符",
  96. maxlength:"长度不能超过18个字符",
  97. remote: "账户已被注册!"
  98. }
  99. },
  100. errorElement: "span",// 错误信息容器标签
  101. errorClass: "textError",
  102. validClass: "inputSus",
  103. onkeyup: false
  104. });
  105. });
  106. </script>
  107. </head>
  108. <body>
  109. <!--<h2 class="mobileTop">注册通行帐号</h2>-->
  110. <div class="mobileRe">
  111. <!-- <h3 class="mobileTopImg"><img src="images/mainlogo.png"></h3> -->
  112. <div class="trainFormItem">
  113. <div class="formEntry">
  114. <form id="regmobileform" name="mobileform" method="post" action="{{rootUrl}}smsreg">
  115. <dl class="regForm">
  116. <dt>手机号</dt>
  117. <dd>
  118. <input type="tel" id="zhmobile" name="zhmobile" class="inputText" placeholder="请输入你的手机号码">
  119. </dd>
  120. <dt>密码</dt>
  121. <dd>
  122. <input type="password" name="zhmpasswd" id="zhmpasswd" class="inputText" placeholder="密码长度为6~16位,建议使用数字与英文混合">
  123. </dd>
  124. <dt>短信校验码</dt>
  125. <dd>
  126. <input type="tel" name="zhsmscode" id="zhsmscode" class="inputText" style="width:45%;" placeholder="校验码是6位数字">
  127. <!--<button class="btnTextMod btnTextOne" id="codebtn" onclick="checkAndSend(this)">获取验证码</button>-->
  128. <input type="button" class="btnTextMod btnTextOne" id="codebtn" value="获取验证码" onclick="checkAndSend(this)" >
  129. </dd>
  130. <dt>怎么称呼您</dt>
  131. <dd>
  132. <input type="text" id="zhmuser" name="zhmuser" class="inputText" placeholder="3-18位,可以由中英文、数字和标点符号等组合">
  133. </dd>
  134. <input type="hidden" name="mobilereg" value="">
  135. </dl>
  136. <dl class="regForm" style="">
  137. <dd class="clearfix"><br><br><input class="button btn-green btnMobile" type="submit" id="regmsubmit" name="regmsubmit" value="同意以下协议并注册"/></dd>
  138. <dd><br><a href="#" style="color:#999">《通行帐号注册协议》</a></dd>
  139. </dl>
  140. </form>
  141. </div>
  142. </div>
  143. </div>
  144. <script type="text/javascript">
  145. var clock = '';
  146. var nums = 60;
  147. var btn;
  148. function checkAndSend(thisbtn){
  149. $('#zhmobile').removeClass('textError');
  150. if($('#zhmobile').siblings().hasClass('textError')){
  151. $('#zhmobile').siblings('.textError').remove();
  152. }
  153. var mobile = $('#zhmobile').val();
  154. if(mobile == ''){
  155. $('#zhmobile').addClass('textError');
  156. var span = '<span class="textError">请输入手机号</span>';
  157. $('#zhmobile').parent().append(span);
  158. return false;
  159. }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})$/)){
  160. $('#zhmobile').addClass('textError');
  161. var span = '<span class="textError">请正确填写您的手机号码</span>';
  162. $('#zhmobile').parent().append(span);
  163. return false;
  164. }
  165. var flag = true;
  166. $.ajax({
  167. url: '{{rootUrl}}checksms',
  168. type: 'POST',
  169. dateType: 'json',
  170. async: false,
  171. data: {zhmobile:mobile},
  172. success: function (result) {
  173. var data = eval('('+result+')');
  174. if(data.code == -1){
  175. $('#zhmobile').addClass('textError');
  176. var span = '<span class="textError">'+data.msg+'</span>';
  177. $('#zhmobile').parent().append(span);
  178. flag = false;
  179. }else if(data.code == 1){
  180. flag = true;
  181. }
  182. }
  183. });
  184. if(!flag){
  185. return false;
  186. }
  187. $('#zhmobile').addClass('inputSus');
  188. sendCode(thisbtn);
  189. }
  190. function sendCode(thisBtn)
  191. {
  192. btn = thisBtn;
  193. btn.disabled = true; //将按钮置为不可点击
  194. btn.value = nums+'秒后可重新获取';
  195. $('#codebtn').removeClass('btnTextOne').addClass('btnText');
  196. btn.style.cursor = 'no-drop';
  197. clock = setInterval(doLoop, 1000); //一秒执行一次
  198. }
  199. function doLoop()
  200. {
  201. nums--;
  202. if(nums > 0){
  203. btn.value = nums+'秒后可重新获取';
  204. }else{
  205. clearInterval(clock); //清除js定时器
  206. btn.disabled = false;
  207. btn.value = '点击发送验证码';
  208. $('#codebtn').removeClass('btnText').addClass('btnTextOne');
  209. btn.style.cursor = 'pointer';
  210. nums = 60; //重置时间
  211. }
  212. }
  213. </script>
  214. </body>
  215. </html>