register.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447
  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. <link rel=stylesheet href={{rootUrl_CSS}}global.css>
  9. <script src={{rootUrl_JS}}jquery-1.7.1.min.js></script>
  10. <script src={{rootUrl_JS}}global.js></script>
  11. <script src={{rootUrl_JS}}smartcost.js></script>
  12. <script src={{rootUrl_JS}}jquery.validate.min.js></script>
  13. <script type="text/javascript">
  14. $(function(){
  15. $("input[id^='web']").click(function(){
  16. if($(this).attr("checked")=='checked'){
  17. $("#web").val(1);
  18. $("#webSoft").show();
  19. }else{
  20. $("#web").val(2);
  21. $("#webSoft").hide();
  22. }
  23. });
  24. jQuery.validator.addMethod("isMobile", function(value, element) {
  25. var length = value.length;
  26. var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1}))+\d{8})$/;
  27. return this.optional(element) || (length == 11 && mobile.test(value));
  28. }, "请正确填写您的手机号码");
  29. jQuery.validator.addMethod("isCode", function(value, element) {
  30. var length = value.length;
  31. var mobile = /^(\d{6})$/;
  32. return this.optional(element) || (length == 6 && mobile.test(value));
  33. }, "请正确填写验证码");
  34. $("#regform").validate({
  35. rules: {
  36. zhemail: {
  37. required: true,
  38. email: true,
  39. remote: {
  40. url: '{{rootUrl}}check',
  41. type: 'POST',
  42. dateType: 'json',
  43. data: {
  44. zhemail: function () {
  45. return $('#zhemail').val();
  46. }
  47. }
  48. }
  49. },
  50. zhuser: {
  51. required: true,
  52. minlength: 3,
  53. maxlength: 18,
  54. remote: {
  55. url: '{{rootUrl}}check',
  56. type: 'POST',
  57. dateType: 'json',
  58. data: {
  59. zhuser: function () {
  60. return $('#zhuser').val();
  61. }
  62. }
  63. }
  64. },
  65. zhpasswd: {
  66. required: true,
  67. minlength: 6
  68. },
  69. zhpwdrepeat: {
  70. required: true,
  71. equalTo: "#zhpasswd",
  72. minlength: 6
  73. },
  74. zhanswer: {
  75. required: true
  76. },
  77. zhq: {
  78. required: true
  79. },
  80. defq: {
  81. required: true
  82. },
  83. realName: {
  84. required: "#web:checked"
  85. },
  86. PhoneNum: {
  87. required: "#web:checked"
  88. },
  89. Company: {
  90. required: "#web:checked"
  91. },
  92. MobileNum: {
  93. required: "#web:checked"
  94. },
  95. QQ: {
  96. required: "#web:checked"
  97. },
  98. Address: {
  99. required: "#web:checked"
  100. }
  101. },
  102. messages: {
  103. zhemail:{
  104. required:"请填写有效邮箱地址",
  105. email: "请填写有效邮箱地址(例如 myemail@qq.com)",
  106. remote: "该邮箱已被注册!"
  107. },
  108. zhuser:{
  109. required:"请输入您的注册账户",
  110. remote: "账户已被注册!",
  111. minlength:"长度不能低于3个字符",
  112. maxlength:"长度超过18个字符"
  113. },
  114. zhpasswd:{
  115. required:"请输入密码",
  116. minlength: "密码长度不能小于6"
  117. },
  118. zhpwdrepeat:{
  119. required:"请重复密码",
  120. minlength: "密码长度不能小于6",
  121. equalTo: "请输入相同的密码"
  122. },
  123. zhanswer: {
  124. required:"请输入答案"
  125. },
  126. zhq: {
  127. required:"请选择问题"
  128. },
  129. defq: {
  130. required:"请选择问题"
  131. },
  132. realName: {
  133. required: "请输入姓名"
  134. },
  135. PhoneNum: {
  136. required: "请输入手机号码"
  137. },
  138. Company: {
  139. required: "请输入公司名称"
  140. },
  141. MobileNum: {
  142. required: "请输入电话号码"
  143. },
  144. QQ: {
  145. required: "请输入QQ"
  146. },
  147. Address: {
  148. required: "请输入地址"
  149. }
  150. },
  151. errorElement: "span",// 错误信息容器标签
  152. errorClass: "erroT",
  153. validClass: "inputSus",
  154. onkeyup: false
  155. });
  156. $('#regmobileform').validate({
  157. rules: {
  158. zhmobile:{
  159. required: true,
  160. isMobile: true,
  161. remote: {
  162. url: '{{rootUrl}}check',
  163. type: 'POST',
  164. dateType: 'json',
  165. data: {
  166. zhmobile: function () {
  167. return $('#zhmobile').val();
  168. }
  169. }
  170. }
  171. },
  172. zhmpasswd: {
  173. required: true,
  174. minlength: 6,
  175. maxlength: 16
  176. },
  177. zhmpwdrepeat: {
  178. required: true,
  179. equalTo: "#zhmpasswd",
  180. minlength: 6
  181. },
  182. zhsmscode: {
  183. required: true,
  184. isCode: true,
  185. remote: {
  186. url: '{{rootUrl}}check',
  187. type: 'POST',
  188. dateType: 'json',
  189. data: {
  190. zhsmscode: function () {
  191. return $('#zhsmscode').val();
  192. },
  193. zhmobile: function () {
  194. return $('#zhmobile').val();
  195. }
  196. }
  197. }
  198. },
  199. zhmuser: {
  200. required: true,
  201. minlength: 3,
  202. maxlength: 18,
  203. remote: {
  204. url: '{{rootUrl}}check',
  205. type: 'POST',
  206. dateType: 'json',
  207. data: {
  208. zhmuser: function () {
  209. return $('#zhmuser').val();
  210. }
  211. }
  212. }
  213. }
  214. },
  215. messages: {
  216. zhmobile:{
  217. required: "请输入手机号",
  218. remote: "该手机号码已被注册!"
  219. },
  220. zhmpasswd:{
  221. required:"请输入密码",
  222. minlength: "密码长度不能小于6",
  223. maxlength: "密码长度不能大于16"
  224. },
  225. zhmpwdrepeat:{
  226. required:"请重复密码",
  227. minlength: "密码长度不能小于6",
  228. equalTo: "请输入相同的密码"
  229. },
  230. zhsmscode: {
  231. required: "请输入验证码",
  232. remote: "验证码过期或不一致,请重新获取"
  233. },
  234. zhmuser:{
  235. required:"请输入您的注册账户",
  236. minlength:"长度不能低于3个字符",
  237. maxlength:"长度不能超过18个字符",
  238. remote: "账户已被注册!"
  239. }
  240. },
  241. errorElement: "span",// 错误信息容器标签
  242. errorClass: "erroT",
  243. validClass: "inputSus",
  244. onkeyup: false
  245. });
  246. $('#zhq').change(function(){
  247. if($('#zhq').val()==6){
  248. $("#defq").show();//隐藏
  249. $("#definput").show();//显示
  250. $(this).addclass(':required');//显示
  251. }else{
  252. $("#defq").hide();//隐藏
  253. $("#definput").hide();//显示
  254. }
  255. });
  256. });
  257. </script>
  258. </head>
  259. <body>
  260. <!-- include '_header' -->
  261. <div class="width950 userInfoPanel clearfix">
  262. <a href="http://sso.smartcost.com.cn" title="返回通行帐号首页"><img src="{{rootUrl_IMG}}mainlogo.png" class="fL"></a><!-- <p><b>techen</b>,<a href="#">管理</a>&nbsp;<a href="#">退出</a></p> -->
  263. </div>
  264. <div class="globalContent width950">
  265. <div class="formItem">
  266. <h2>注册通行帐号</h2>
  267. <div class="trainForm">
  268. <div class="trainFormTab clearfix">
  269. <a class="now">使用邮箱注册</a>
  270. <a>使用手机注册</a>
  271. </div>
  272. </div>
  273. <div class="trainFormItem">
  274. <div class="formEntry clearfix">
  275. <div class="regInfo fR">
  276. <div class="regStepTip">
  277. <p class="colGreen"><b>第一步 填写注册信息</b></p>
  278. <p>第二步 进行邮箱验证</p>
  279. <p>第三步 完成注册</p>
  280. </div>
  281. <div class="regTips">
  282. <b>什么是纵横通行账号?</b>
  283. <p>纵横通行账号是纵横推出的统一帐号系统。拥有了纵横通行账号即可以畅通纵横网站服务,在众多个性化产品中直接登录使用,免去了重复注册,重复登录的步骤,并能充分享受为您量身定制的各种个性化会员服务。</p>
  284. </div>
  285. </div>
  286. <form id="regform" name="iform" method="post" >
  287. <dl class="regForm">
  288. <dd class="clearfix hide"><b style="font-size:30px;color:#f90000">暂停注册</b></dd>
  289. <dt>您的邮箱</dt>
  290. <dd><input id="zhemail" name="zhemail" class="inputText"><p class="tips">找回密码,修改密码等操作重要凭证</p></dd>
  291. <dt>密码</dt>
  292. <dd><input type="password" name="zhpasswd" id="zhpasswd" class="inputText">
  293. <p class="tips">密码长度为6~16位,建议使用数字与英文混合</p>
  294. </dd>
  295. <dt>确认密码</dt>
  296. <dd><input type="password" name="zhpwdrepeat" id="zhpwdrepeat" class="inputText">
  297. <p class="tips">再次输入你的密码</p></dd>
  298. <dt>怎么称呼您</dt>
  299. <dd><input name="zhuser" id="zhuser" class="inputText">
  300. <p class="tips">3-18位,可以由中英文、数字和标点符号等组合</p>
  301. </dd>
  302. <dt>密码保护问题</dt>
  303. <dd>
  304. <select name ="zhq" id="zhq">
  305. <option value="">请选择</option>
  306. <option value="1">您父亲的名字是?</option>
  307. <option value="2">您母亲的名字是?</option>
  308. <option value="3">您的英文名字是?</option>
  309. <option value="4">您身份证最后6位数字是?</option>
  310. <option value="5">您就读的第一所学校全称是?</option>
  311. <option value="6">自定义问题</option>
  312. </select>
  313. </dd>
  314. <dt id="defq" style="display: none">自定义问题</dt>
  315. <dd id="definput" style="display: none"><input name="defq" id="defq" class="inputText" /></dd>
  316. <dt>您的答案</dt>
  317. <dd><input name="zhanswer" id="zhanswer" class="inputText">
  318. <p class="tips">找回账号密码时必填项,请牢记!</p></dd>
  319. </dl>
  320. <dl class="regForm">
  321. <dd class="clearfix"><br><br><input type="submit" id="regsubmit" name="regsubmit" value="同意以下协议并注册" class="button btn-green " />
  322. <!-- <b style="font-size:18px;color:#f90000">暂停注册,请联系官方客服,企业QQ:800003850</b> -->
  323. </dd>
  324. <dd><br><a href="http://help.smartcost.com.cn/hc/kb/article/161192/" target="_blank" style="color:#999">《通行帐号注册协议》</a></dd>
  325. </dl>
  326. </form>
  327. </div>
  328. <div class="formEntry reportContent" style="display:none">
  329. <div class="regInfo fR">
  330. <div class="regStepTip">
  331. <p class="colGreen"><b>第一步 填写注册信息</b></p>
  332. <p>第二步 完成注册</p>
  333. </div>
  334. <div class="regTips">
  335. <b>什么是纵横通行账号?</b>
  336. <p>纵横通行账号是纵横推出的统一帐号系统。拥有了纵横通行证即可以畅通纵横网站服务,在众多个性化产品中直接登录使用,免去了重复注册,重复登录的步骤,并能充分享受为您量身定制的各种个性化会员服务。</p>
  337. </div>
  338. </div>
  339. <form id="regmobileform" name="mobileform" method="post" action="{{rootUrl}}smsreg">
  340. <dl class="regForm">
  341. <dt>手机号</dt>
  342. <dd>
  343. <input id="zhmobile" name="zhmobile" class="inputText">
  344. <p class="tips">请输入你的手机号码</p>
  345. </dd>
  346. <dt>密码</dt>
  347. <dd><input type="password" name="zhmpasswd" id="zhmpasswd" class="inputText">
  348. <p class="tips">密码长度为6~16位,建议使用数字与英文混合</p>
  349. </dd>
  350. <dt>确认密码</dt>
  351. <dd><input type="password" name="zhmpwdrepeat" id="zhmpwdrepeat" class="inputText">
  352. <p class="tips">再次输入你的密码</p></dd>
  353. <dt>短信校验码</dt>
  354. <dd><input type="text" class="inputText" name="zhsmscode" id="zhsmscode" style="width:177px;"><p class="tips">验证码是6位数字</p><input type="button" class="btnTextOne" id="codebtn" name="codebtn" value="获取验证码" onclick="checkAndSend(this)" ></dd>
  355. <dt>怎么称呼您</dt>
  356. <dd>
  357. <input id="zhmuser" name="zhmuser" class="inputText">
  358. <p class="tips">3-18位,可以由中英文、数字和标点符号等组合</p>
  359. </dd>
  360. </dl>
  361. <dl class="regForm">
  362. <dd class="clearfix"><br><br><input type="submit" id="regmsubmit" name="regmsubmit" class="button btn-green " value="同意以下协议并注册"></dd>
  363. <dd><br><a href="http://help.smartcost.com.cn/hc/kb/article/161192/" target="_blank" style="color:#999">《通行帐号注册协议》</a></dd>
  364. </dl>
  365. </form>
  366. </div>
  367. </div>
  368. </div>
  369. </div>
  370. <!-- include '_footer' -->
  371. <script type="text/javascript">
  372. var clock = '';
  373. var nums = 60;
  374. var btn;
  375. function checkAndSend(thisbtn){
  376. $('#zhmobile').removeClass('erroT');
  377. if($('#zhmobile').siblings().hasClass('erroT')){
  378. $('#zhmobile').siblings('.erroT').remove();
  379. }
  380. var mobile = $('#zhmobile').val();
  381. if(mobile == ''){
  382. $('#zhmobile').addClass('erroT');
  383. var span = '<span class="erroT">请输入手机号</span>';
  384. $('#zhmobile').parent().append(span);
  385. return false;
  386. }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})$/)){
  387. $('#zhmobile').addClass('erroT');
  388. var span = '<span class="erroT">请正确填写您的手机号码</span>';
  389. $('#zhmobile').parent().append(span);
  390. return false;
  391. }
  392. var flag = true;
  393. $.ajax({
  394. url: '{{rootUrl}}checksms',
  395. type: 'POST',
  396. dateType: 'json',
  397. async: false,
  398. data: {zhmobile:mobile},
  399. success: function (result) {
  400. var data = eval('('+result+')');
  401. if(data.code == -1){
  402. $('#zhmobile').addClass('erroT');
  403. var span = '<span class="erroT">'+data.msg+'</span>';
  404. $('#zhmobile').parent().append(span);
  405. flag = false;
  406. }else if(data.code == 1){
  407. flag = true;
  408. }
  409. }
  410. });
  411. if(!flag){
  412. return false;
  413. }
  414. $('#zhmobile').addClass('inputSus');
  415. sendCode(thisbtn);
  416. }
  417. function sendCode(thisBtn)
  418. {
  419. btn = thisBtn;
  420. btn.disabled = true; //将按钮置为不可点击
  421. btn.value = nums+'秒后可重新获取';
  422. $('#codebtn').removeClass('btnTextOne').addClass('btnText');
  423. btn.style.cursor = 'no-drop';
  424. clock = setInterval(doLoop, 1000); //一秒执行一次
  425. }
  426. function doLoop()
  427. {
  428. nums--;
  429. if(nums > 0){
  430. btn.value = nums+'秒后可重新获取';
  431. }else{
  432. clearInterval(clock); //清除js定时器
  433. btn.disabled = false;
  434. btn.value = '点击发送验证码';
  435. $('#codebtn').removeClass('btnText').addClass('btnTextOne');
  436. btn.style.cursor = 'pointer';
  437. nums = 60; //重置时间
  438. }
  439. }
  440. </script>
  441. </body>
  442. </html>