説明なし

forgetPassword.html 8.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta content="yes" name="apple-mobile-web-app-capable">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  7. <title>找回密码</title>
  8. <link rel="stylesheet" type="text/css" href="public/public_css.css"/>
  9. <style type="text/css">
  10. body{
  11. padding-top: 0.25rem;
  12. background: #FFFFFF;
  13. }
  14. .label{
  15. color: #444444;
  16. font-size: 0.16rem;
  17. display: inline-block;
  18. width: 0.75rem;
  19. }
  20. input{
  21. border: none;
  22. font-size: 0.16rem;
  23. outline: none;
  24. margin-left: 0.16rem;
  25. }
  26. .tel{
  27. width: 3.2rem;
  28. margin: auto;
  29. margin-top: 0.16rem;
  30. padding-bottom: 0.05rem;
  31. border-bottom: 0.01rem solid #D8D8D8;
  32. }
  33. .tel button{
  34. width: 0.73rem;
  35. height: 0.28rem;
  36. border-radius: 0.06rem;
  37. background: #F4F4F4;
  38. font-size: 0.14rem;
  39. color: #666666;
  40. }
  41. input[data-type="password1"]{
  42. width: 1.45rem;
  43. }
  44. .button{
  45. width: 2.18rem;
  46. height: 0.41rem;
  47. border-radius: 0.26rem;
  48. background: #FFE100;
  49. color: #FFFFFF;
  50. box-shadow:0px 0.02rem 0px rgba(251,179,179,0.5);
  51. font-size: 0.2rem;
  52. margin: auto;
  53. margin-top: 0.68rem;
  54. display: block;
  55. }
  56. .getYzm{
  57. width: 2.54rem;
  58. background: #F2F2F2;
  59. border-radius: 0.06rem;
  60. margin: auto;
  61. margin-top: 0.15rem;
  62. margin-bottom: 0.15rem;
  63. }
  64. .getYzm input{
  65. font-size: 0.16rem;
  66. line-height: 0.22rem;
  67. color: #666666;
  68. background: #F2F2F2;
  69. width: 1.43rem;
  70. vertical-align: middle;
  71. }
  72. .getYzm img{
  73. height: 0.4rem;
  74. width: 0.8rem;
  75. display: inline-block;
  76. vertical-align: middle;
  77. margin: 0.1rem 0.1rem 0.1rem 0;
  78. }
  79. .yesOrNo{
  80. border-top: 0.01rem solid rgba(151,151,151,0.1998);
  81. }
  82. .yesOrNo button{
  83. width: 1.46rem;
  84. font-size: 0.14rem;
  85. line-height: 0.2rem;
  86. color: #0F7FFF;
  87. padding: 0.09rem 0 0.12rem 0;
  88. }
  89. .yesOrNo button:nth-of-type(1){
  90. border-right: 0.01rem solid rgba(151,151,151,0.1998);
  91. }
  92. .mobilePhone,.passwordPrompt,.passwordConfirm,.yzmPrompt{
  93. display: none;
  94. font-size: 0.12rem;
  95. color: red;
  96. margin-left: 1rem;
  97. position: relative;
  98. top: 0.1rem;
  99. }
  100. </style>
  101. </head>
  102. <body>
  103. <p class="mobilePhone">请正确填写手机号</p>
  104. <div class="tel"><div class="label">手机号</div><input type="tel" id="mobile" placeholder="请输入手机号" onchange="mobileChange()"/></div>
  105. <p class="yzmPrompt">请填写手机验证码</p>
  106. <div class="tel">
  107. <div class="label">验证码</div>
  108. <input data-type="password1" id="code" type="tel" placeholder="请输入手机验证码" onchange="yzmChangeEvent()"/>
  109. <button id="mobileYzm" onclick="getYzmEvent()">验证码</button>
  110. </div>
  111. <p class="passwordPrompt">请正确填写6-16位数字、字母组合密码</p>
  112. <div class="tel"><div class="label">新密码</div><input type="password" id="password" placeholder="6-16位数字、字母组合" onchange="passwordBlur()"/></div>
  113. <p class="passwordConfirm">密码确认有误</p>
  114. <div class="tel"><div class="label">确认密码</div><input type="password" id="password01" placeholder="请再次输入密码" onchange="passwordCongirmEvent()"/></div>
  115. <button class="button" onclick="goSetPassword()">完成</button>
  116. <div class="maskYzm">
  117. <div class="yzmCon">
  118. <div class="getYzm">
  119. <input type="text" id="imgYzm" placeholder="请输入验证码"/>
  120. <img onclick="imgYzmChange()" src="/api/V1/imgCode?mobile=13621209952" />
  121. </div>
  122. <div class="yesOrNo">
  123. <button onclick="cancelYzm()">取消</button>
  124. <button onclick="yesYzm()">确定</button>
  125. </div>
  126. </div>
  127. </div>
  128. <div class="mask">
  129. <div class="content">
  130. <h3>提示</h3>
  131. <p>密码错误啊啊啊啊啊</p>
  132. <div onclick="iknow()">我知道了</div>
  133. </div>
  134. </div>
  135. </body>
  136. </html>
  137. <script type="text/javascript" src="public/jquery-2.1.0.js"></script>
  138. <script type="text/javascript">
  139. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  140. window.onresize = function(){
  141. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  142. }
  143. var time = '';
  144. var mobileFlag = false;
  145. var pwdFlag=false;
  146. var pwdConfirmFlag=false;
  147. var successFlag = false;
  148. function iknow() {
  149. if(successFlag){
  150. var addUrl = localStorage.getItem('addUrl')
  151. window.location.href=addUrl;
  152. }
  153. $(".mask").css("visibility","hidden");
  154. $("#imgYzm").val("")
  155. }
  156. function cancelYzm(){
  157. $(".maskYzm").css("visibility","hidden")
  158. }
  159. function imgYzmChange () {
  160. //更换验证图片验证码
  161. $(".getYzm img").attr("src",'/api/V1/imgCode?mobile=' + $("#mobile").val() + '&tmp=' + Date.parse(new Date()));
  162. $("#imgYzm").val("")
  163. }
  164. function yesYzm () {
  165. var imgCode = $("#imgYzm").val();
  166. var teleNumber = $("#mobile").val();
  167. sendCode(imgCode,teleNumber)
  168. }
  169. function sendCode (imgCode,teleNumber) {
  170. $.ajax({
  171. type:"post",
  172. url:"/api/V1/h5SendCode",
  173. data: {
  174. img_code:imgCode,
  175. mobile:teleNumber,
  176. code_type:1,
  177. send_type:2
  178. },
  179. success: function (res) {
  180. console.log(JSON.parse(res))
  181. if(JSON.parse(res).code == 0){
  182. time = JSON.parse(res).res.time_out;
  183. timeInterval = setInterval(timeDown,1000);
  184. $(".maskYzm").css("visibility","hidden")
  185. }else{
  186. var msg = JSON.parse(res).message[0]
  187. $(".maskYzm").css("visibility","hidden");
  188. $(".mask").css("visibility","visible");
  189. if(msg.indexOf("img_code") != -1){
  190. msg = msg.replace('img_code', '图片验证码');
  191. }
  192. $(".mask .content p").html(msg);
  193. }
  194. }
  195. });
  196. }
  197. //密码正则
  198. function passwordBlur () {
  199. var password = $("#password").val();
  200. var pwd = /^[0-9A-Za-z]{6,16}$/;
  201. // var pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
  202. if(!pwd.test(password)){
  203. //密码格式不正确
  204. $(".passwordPrompt").css('display','block');
  205. pwdFlag = false;
  206. }else{
  207. $(".passwordPrompt").css('display','none');
  208. pwdFlag = true;
  209. }
  210. }
  211. //手机号正则
  212. function mobileChange () {
  213. var teleNumber = $("#mobile").val();
  214. var myMobile=/^[0-9]{11}$/;
  215. if (!myMobile.test(teleNumber)) {
  216. //手机号码未填写及填写不正确
  217. $(".mobilePhone").css("display","block");
  218. mobileFlag=false;
  219. }else{
  220. $(".mobilePhone").css("display","none");
  221. mobileFlag=true;
  222. }
  223. }
  224. //确认密码
  225. function passwordCongirmEvent (){
  226. var pwd = $("#password").val();
  227. var pwdCongirm = $("#password01").val();
  228. if(pwd != pwdCongirm){
  229. $(".passwordConfirm").css("display","block");
  230. pwdConfirmFlag = false;
  231. }else{
  232. $(".passwordConfirm").css("display","none");
  233. pwdConfirmFlag = true;
  234. }
  235. }
  236. //手机验证码
  237. function yzmChangeEvent () {
  238. var code = $("#code").val();
  239. if(code != ''){
  240. $(".yzmPrompt").css("display","none");
  241. }else{
  242. $(".yzmPrompt").css("display","block");
  243. }
  244. }
  245. function getYzmEvent(){
  246. var teleNumber = $("#mobile").val();
  247. mobileChange();
  248. if(mobileFlag){
  249. $(".mask").css("visibility","hidden")
  250. $(".maskYzm").css('visibility','visible');
  251. $(".getYzm img").attr("src",'/api/V1/imgCode?mobile=' + teleNumber + '&tmp=' + Date.parse(new Date()));
  252. $("#imgYzm").val("");
  253. }
  254. }
  255. function timeDown () {
  256. $("#mobileYzm").attr('disabled','true')
  257. $("#mobileYzm").css("color","red");
  258. time -- ;
  259. if(time == 0){
  260. $("#mobileYzm").css("color","#666666");
  261. $("#mobileYzm").html('验证码');
  262. $("#mobileYzm").removeAttr('disabled')
  263. clearInterval(timeInterval);
  264. }else{
  265. $("#mobileYzm").html(time);
  266. }
  267. }
  268. //完成
  269. function goSetPassword(){
  270. mobileChange();
  271. passwordBlur();
  272. passwordCongirmEvent();
  273. if(mobileFlag&&pwdFlag&&pwdConfirmFlag){
  274. var code = $("#code").val();
  275. if(code != ''){
  276. resetPassword();
  277. }else{
  278. $(".yzmPrompt").css("display","block");
  279. }
  280. }
  281. }
  282. function resetPassword () {
  283. $.ajax({
  284. type:"post",
  285. url:"/api/V1/h5ResetPassword",
  286. data:{
  287. 'mobile':$("#mobile").val(),
  288. 'password':$("#password").val(),
  289. 'c_password':$("#password01").val(),
  290. 'code':$("#code").val()
  291. },
  292. success: function (res){
  293. console.log(JSON.parse(res))
  294. if(JSON.parse(res).code == 0){
  295. //登录成功
  296. $(".mask").css("visibility","visible");
  297. var msg = JSON.parse(res).message[0];
  298. $(".content p").html('密码修改成功');
  299. successFlag = true;
  300. }else{
  301. var msg = JSON.parse(res).message[0]
  302. $(".mask").css("visibility","visible");
  303. if(msg.indexOf("mobile") != -1){
  304. msg = msg.replace('mobile', '手机号');
  305. }
  306. if(msg.indexOf("c_password") != -1){
  307. msg = msg.replace('c_password', '确认密码');
  308. }
  309. if(msg.indexOf("password") != -1){
  310. msg = msg.replace('password', '密码');
  311. }
  312. if(msg.indexOf("code") != -1){
  313. msg = msg.replace('code', '验证码');
  314. }
  315. $(".content p").html(msg);
  316. }
  317. }
  318. });
  319. }
  320. </script>