editPhone.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  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. </head>
  7. <body layout:fragment="content">
  8. <article class="page-container">
  9. <form class="form form-horizontal" id="form-edit">
  10. <input type="hidden" th:name="id" th:id="uid" th:value="${id}"/>
  11. <div class="row cl">
  12. <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>手机号:(重新登录后生效)</label>
  13. <div class="formControls col-xs-8 col-sm-6">
  14. <input type="text" class="input-text" placeholder="请输入想要修改成的手机号" id="phone" name="phone" />
  15. </div>
  16. </div>
  17. <div class="row cl">
  18. <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>验证码:</label>
  19. <div class="formControls col-xs-8 col-sm-4">
  20. <input type="text" class="input-text" placeholder="请输入验证码" id="verification_code" name="verification_code" />
  21. </div>
  22. <div class="formControls col-xs-4 col-sm-2">
  23. <input id="verificationCode" class="btn btn-primary radius" onclick="getVerificationCode()" value="获取验证码" type="button"/>
  24. </div>
  25. </div>
  26. <div class="row cl">
  27. <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
  28. <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
  29. <button onClick="removeIframe();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
  30. </div>
  31. </div>
  32. </form>
  33. </article>
  34. <script th:inline="javascript">
  35. /**
  36. * 取消
  37. */
  38. function removeIframe() {
  39. var index = parent.layer.getFrameIndex(window.name);
  40. parent.layer.close(index);
  41. }
  42. //获取验证码
  43. function getVerificationCode() {
  44. var phone = $("#phone").val();
  45. var v_regex = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
  46. if (phone) {
  47. if (v_regex.test(phone)) {
  48. //checkPhoneNumber(phone)
  49. startCountDown();
  50. sendVerificationCode(phone);
  51. } else {
  52. errorMessage('手机号码格式不正确!');
  53. }
  54. } else {
  55. errorMessage('请输入手机号码!');
  56. }
  57. }
  58. //发送验证码
  59. function sendVerificationCode(phone) {
  60. $.ajax({
  61. contentType: "application/json;charset=utf-8",
  62. dataType: "json",
  63. url: pagePath + "/home/sendVerificationCode",
  64. type: "get",
  65. sync: true,
  66. data: {
  67. phone: phone
  68. },
  69. success: function (result) {
  70. if (result.success) {
  71. succeedMessage(result.message);
  72. //startCountDown();
  73. } else {
  74. errorMessage(result.message);
  75. }
  76. },
  77. error: function () {
  78. errorMessage('系统错误!');
  79. }
  80. });
  81. }
  82. //验证码倒计时
  83. function startCountDown() {
  84. var second = 60;//时间默认值
  85. $("#verificationCode").attr("disabled", true);
  86. var timer = null;
  87. timer = setInterval(function () {
  88. $("#verificationCode").val(second + "秒后重发")
  89. second--;
  90. if (second < 0) {
  91. $("#verificationCode").attr("disabled", false);
  92. $("#verificationCode").val("获取验证码")
  93. clearInterval(timer);
  94. }
  95. }, 1000);
  96. }
  97. $(function(){
  98. var userId = [[${id}]];
  99. $("#form-edit").validate({
  100. rules:{
  101. phone: {
  102. required: true,
  103. isMobile: true,
  104. }
  105. },
  106. onkeyup:false,
  107. focusCleanup:true,
  108. success:"valid",
  109. submitHandler:function(form){
  110. $(form).ajaxSubmit({
  111. type: 'put',
  112. url: pagePath+"/admin/user/updateUser/"+userId,
  113. dataType:"json",
  114. success: function(data){
  115. if(data.status == "success"){
  116. succeedMessage(data.message);
  117. setTimeClose();
  118. }else {
  119. // $(form).find(":submit").attr("disabled", false);
  120. errorMessage(data.message);
  121. }
  122. }
  123. });
  124. return false; // 非常重要,如果是false,则表明是不跳转,在本页上处理,也就是ajax,如果是非false,则传统的form跳转。
  125. },
  126. errorPlacement: function(error, element) {
  127. if(element.attr('id') == 'content'){
  128. error.addClass(' label_error')
  129. }
  130. error.appendTo(element.parent());
  131. }
  132. });
  133. });
  134. </script>
  135. </body>
  136. </html>