personal_register.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  1. <!DOCTYPE HTML>
  2. <html xmlns:th="http://www.thymeleaf.org"
  3. xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  4. layout:decorate="~{admin/common/common}">
  5. <head>
  6. <title>注册</title>
  7. <style>
  8. label.error {
  9. left: 15px;
  10. top: 29px
  11. }
  12. #filePicker div:nth-child(2) {
  13. width: 100% !important;
  14. height: 100% !important;
  15. }
  16. .ke-container {
  17. width: 100% !important;
  18. }
  19. .ke-swfupload-body {
  20. height: 265px
  21. }
  22. .ke-dialog-body {
  23. height: 340px !important;
  24. }
  25. .ke-dialog-default {
  26. height: 410px !important;
  27. }
  28. </style>
  29. </head>
  30. <body layout:fragment="content">
  31. <article class="page-container">
  32. <form class="form form-horizontal" id="form-information-add">
  33. <div class="row cl">
  34. <label class="form-label col-xs-4 col-sm-2"><span class="c-red"></span>基本信息:</label>
  35. <div class="formControls col-xs-8 col-sm-9">
  36. <label>有“<span class="c-red">*</span>”的为必填项</label>
  37. </div>
  38. </div>
  39. <div class="row cl">
  40. <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>姓名:</label>
  41. <div class="formControls col-xs-8 col-sm-3">
  42. <div class="add_contact">
  43. <p><input type="text" required minlength="1" maxlength="45" class="width_200 input-text user_name"
  44. placeholder="请输入联系人姓名" th:name="user_name"/></p>
  45. </div>
  46. </div>
  47. </div>
  48. <div class="row cl">
  49. <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>账号名:</label>
  50. <div class="formControls col-xs-8 col-sm-3">
  51. <div class="add_contact">
  52. <p><input type="text" required class="ml_50 width_200 input-text nick_name" th:name="nick_name"
  53. th:id="nick_name"
  54. placeholder="请输入账号名"/></p>
  55. </div>
  56. </div>
  57. </div>
  58. <div class="row cl">
  59. <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>手机号:</label>
  60. <div class="formControls col-xs-8 col-sm-3">
  61. <div class="add_contact">
  62. <p><input type="text" required isMobile="true" class="ml_50 width_200 input-text phone"
  63. placeholder="请输入手机号" th:name="phone" th:id="phone"/></p>
  64. <input id="verificationCode" onClick="getVerificationCode()" type="button"
  65. class="btn btn-primary radius" value="获取验证码"/>
  66. </div>
  67. </div>
  68. </div>
  69. <div class="row cl">
  70. <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>验证码:</label>
  71. <div class="formControls col-xs-8 col-sm-3">
  72. <div class="add_contact">
  73. <p><input type="text" required class="ml_50 width_200 input-text" th:name="validateNum"
  74. placeholder="请输入短信验证码"/></p>
  75. </div>
  76. </div>
  77. </div>
  78. <div class="row cl">
  79. <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>密码:</label>
  80. <div class="formControls col-xs-8 col-sm-3">
  81. <div class="add_contact">
  82. <p><input type="password" required class="ml_50 width_200 input-text " th:name="password"
  83. placeholder="请至少输入六个字符" th:id="password"/></p>
  84. </div>
  85. </div>
  86. </div>
  87. <div class="row cl">
  88. <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>确认密码:</label>
  89. <div class="formControls col-xs-8 col-sm-3">
  90. <div class="add_contact">
  91. <p><input type="password" required class="ml_50 width_200 input-text " th:name="repassword"
  92. placeholder="请再次输入密码"/></p>
  93. </div>
  94. </div>
  95. </div>
  96. <div class="row cl">
  97. <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
  98. <a onclick="submit()" class="btn btn-primary radius norefactor"><i class="Hui-iconfont">&#xe632;</i>注册</a>
  99. <button onClick="removeIframe();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
  100. </div>
  101. </div>
  102. </form>
  103. </article>
  104. <script th:inline="javascript">
  105. //window.onload = function () {
  106. $(function () {
  107. var options = {
  108. uploadBtnId: '#filePicker',
  109. picturePreId: 'fileListPre',
  110. hiddenPictureUrl: 'img',
  111. hiddenPictureName: 'imgName',
  112. width: 81,
  113. height: 81,
  114. fileSizeLimit: 100 * 1024 * 1024,
  115. fileSingleSizeLimit: 100 * 1024 * 1024
  116. };
  117. var webUploadDocList = new $WebUploadDocList(options);
  118. webUploadDocList.init();
  119. })
  120. //}
  121. $("#industryTypeList").change(function () {
  122. if ($('#industryTypeList option:selected').val() == "Empty") {
  123. $("#industry").show()
  124. } else {
  125. $("#industry").hide()
  126. }
  127. });
  128. /**
  129. * 取消
  130. */
  131. function removeIframe() {
  132. var index = parent.layer.getFrameIndex(window.name);
  133. parent.layer.close(index);
  134. }
  135. laydate.render({
  136. elem: '#establishment_date' //指定元素
  137. });
  138. function removeLine(obj) {
  139. $(obj).parent().parent().remove();
  140. }
  141. function addContact() {
  142. var length = $(".add_contact").length;
  143. var html = "<i class='Hui-iconfont' onclick='removeLine(this)'>&#xe6a1;</i>";
  144. $(".add_contact:eq(0)").clone().insertAfter($('.add_contact').eq(-1))
  145. .find(".phone").removeAttr("name").attr("name", "companyContacts[" + length + "].phone").val("").end()
  146. .find(".contact").removeAttr("name").attr("name", "companyContacts[" + length + "].contact").val("").end()
  147. .find(".email").removeAttr("name").attr("name", "companyContacts[" + length + "].email").val("").end()
  148. .find(".icon_font").html(html).end();
  149. }
  150. var contact_index = 0;
  151. function delContact(obj) {
  152. var $this = $(obj);
  153. $this.parent().parent().remove();
  154. }
  155. //获取验证码
  156. function getVerificationCode() {
  157. var phone = $("#phone").val();
  158. var v_regex = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
  159. if (phone) {
  160. if (v_regex.test(phone)) {
  161. //checkPhoneNumber(phone)
  162. //startCountDown();
  163. sendVerificationCode(phone);
  164. } else {
  165. errorMessage('手机号码格式不正确!');
  166. }
  167. } else {
  168. errorMessage('请输入手机号码!');
  169. }
  170. }
  171. //校验手机号码是否已被使用
  172. function checkPhoneNumber(phone) {
  173. $.ajax({
  174. dataType: "json",
  175. contentType: "application/json;charset=utf-8",
  176. url: pagePath + "/company/companyInfoManage/getPhone",
  177. type: "get",
  178. sync: true,
  179. data: {
  180. phone: phone
  181. },
  182. success: function (result) {
  183. if (result) {
  184. sendVerificationCode(phone);
  185. } else {
  186. errorMessage('该手机号码已被注册!');
  187. }
  188. },
  189. error: function () {
  190. errorMessage('系统错误!');
  191. }
  192. });
  193. }
  194. //发送验证码
  195. function sendVerificationCode(phone) {
  196. $.ajax({
  197. contentType: "application/json;charset=utf-8",
  198. dataType: "json",
  199. url: pagePath + "/home/sendVerificationCode",
  200. type: "get",
  201. sync: true,
  202. data: {
  203. phone: phone
  204. },
  205. success: function (result) {
  206. if (result.success) {
  207. startCountDown();
  208. succeedMessage(result.message);
  209. } else {
  210. errorMessage(result.message);
  211. }
  212. },
  213. error: function () {
  214. errorMessage('系统错误!');
  215. }
  216. });
  217. }
  218. //验证码倒计时
  219. function startCountDown() {
  220. var second = 60;//时间默认值
  221. $("#verificationCode").attr("disabled", true);
  222. var timer = null;
  223. timer = setInterval(function () {
  224. $("#verificationCode").val(second + "秒后重发")
  225. second--;
  226. if (second < 0) {
  227. $("#verificationCode").attr("disabled", false);
  228. $("#verificationCode").val("获取验证码")
  229. clearInterval(timer);
  230. }
  231. }, 1000);
  232. }
  233. /*自定义jQuery校验是9位数字和字母*/
  234. jQuery.validator.addMethod("LetterAndNum9", function (value, element) {
  235. return this.optional(element) || /^[a-zA-Z0-9]{9}$/.test(value);
  236. }, "组织结构代码由9位数字或字母组成");
  237. //保存个人信息
  238. $("#form-information-add").validate({
  239. rules: {
  240. no: {
  241. minlength: 1,
  242. maxlength: 60
  243. },
  244. nick_name: {
  245. minlength: 1,
  246. maxlength: 60,
  247. remote: {
  248. url: pagePath + "/home/getNickName",
  249. type: "get",
  250. data: {
  251. nick_name: function () {
  252. return $("#nick_name").val();
  253. },
  254. id: ''
  255. }
  256. }
  257. },
  258. value: {
  259. required: true,
  260. minlength: 1,
  261. maxlength: 60
  262. },
  263. user_name: {
  264. minlength: 1,
  265. maxlength: 20
  266. },
  267. phone: {
  268. minlength: 1,
  269. maxlength: 20,
  270. /*remote: {
  271. url: pagePath + "/company/companyInfoManage/getPhone",
  272. type: "get",
  273. data: {
  274. company_name: function () {
  275. return $("#phone").val();
  276. },
  277. id: ''
  278. }
  279. },*/
  280. phone: true
  281. },
  282. isphone: {
  283. minlength: 1,
  284. maxlength: 20,
  285. phone: true
  286. },
  287. validateNum: {
  288. minlength: 1,
  289. maxlength: 20
  290. },
  291. password: {
  292. minlength: 6,
  293. maxlength: 20,
  294. // password: true,
  295. },
  296. repassword: {
  297. minlength: 6,
  298. maxlength: 20,
  299. repassword: true,
  300. },
  301. email: {
  302. //minlength: 6,
  303. maxlength: 20,
  304. email: true,
  305. }
  306. },
  307. messages: {
  308. phone: {
  309. remote: "该手机号码已被注册!"
  310. },
  311. nick_name: {
  312. remote: "该账号名已被注册!"
  313. }
  314. }
  315. });
  316. function submit() {
  317. console.log($('#form-information-add').valid());
  318. if($('#form-information-add').valid()){
  319. $("#form-information-add").ajaxSubmit({
  320. type: 'post',
  321. url: pagePath + "/home/personalRegister",
  322. dataType: "json",
  323. success: function (data) {
  324. if (data.success) {
  325. succeedMessage(data.message, 3000);
  326. setTimeout(function () {
  327. parent.removeIframe();
  328. }, 3000);
  329. $('.norefactor').removeAttr('onclick')
  330. } else {
  331. // $(form).find(":submit").attr("disabled", false);
  332. errorMessage(data.message);
  333. }
  334. },
  335. error: function () {
  336. errorMessage('系统错误!');
  337. }
  338. });
  339. }
  340. }
  341. </script>
  342. </body>
  343. </html>