FindPassword.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499
  1. Namespace.register("U.MD.U.F"); //用户找回帐号
  2. //#region 切换找回方式
  3. /**
  4. * 弹出密码找回
  5. *
  6. */
  7. U.MD.U.F.findPassword = function () {
  8. var _parent = $("#U_MD_U_L_login"); //登录注册框
  9. //弹出密码找回
  10. var _child = _parent.Child(); //获取登录注册找回密码的div
  11. _child[1].style.display = "none"; //隐藏注册
  12. _child[2].style.display = "none"; //隐藏登录
  13. $("div", _child[0])[2].innerHTML = "找回密码";
  14. //头部设置内容
  15. var _head = $(_child[0]).childs()[1];
  16. $(_head).addAttrArray({
  17. "innerHTML": "",
  18. "onclick": null,
  19. "className": "",
  20. "title": ""
  21. });
  22. //调用找回密码的上下部的处理,设置为第一步
  23. U.MD.U.F.findPasswordProcessing($(_child[3]).Child()[1], 0);
  24. //显示的默认密保找回处理
  25. U.MD.U.F.switchEmailOrSecurityFind($("span", _child[3])[0], 'security');
  26. _child[3].style.display = "block"; //显示找回密码
  27. }
  28. /**
  29. * 手机号找回后的上下步操作处理
  30. *
  31. * @param {element} 找回密码元素
  32. * @param {int} 第几步
  33. */
  34. U.MD.U.F.findPasswordProcessing = function (el, displaynum) {
  35. var _inputs,
  36. _len,
  37. _bottom,
  38. _child = $(el).Child(), //获取找回和确认找回的两个步骤的元素
  39. _parentel = $(el).Parent();
  40. //找回密码确认上下步处理
  41. for (i = 0; i < _child.length; i++) {
  42. //判断显示的隐藏的区域处理
  43. if (i == displaynum) { //如果是显示
  44. _child[i].style.display = "block";
  45. _inputs = $("input", _child[i]); //获取显示的元素下的input元素
  46. _len = _inputs.length; //输入框的总长度
  47. }
  48. else { //隐藏
  49. _child[i].style.display = "none";
  50. }
  51. }
  52. //使用聚焦和释放的方式,重新设置input的初始化样式
  53. while (_len--) {
  54. _inputs[_len].value = "";
  55. _inputs[_len].innerText = "6-20位字符或数字";
  56. _inputs[_len].focus();
  57. _inputs[_len].blur();
  58. }
  59. }
  60. /**
  61. * 切换找回的方式,邮箱,密保,手机切找回的方式
  62. *
  63. */
  64. U.MD.U.F.switchEmailOrSecurityFind = function (el, typename) {
  65. var _input,
  66. _tempel,
  67. _parentel = $(el).Parent(2),
  68. _childs = $(_parentel).Child(),
  69. _inputs = $("input", _parentel),
  70. _span = $("span", _parentel),
  71. _is = $("i", _parentel),
  72. _bottom = $(_parentel).Child()[2],
  73. _code = $("#U_MD_U_L_Overflow_Code")[0]; //验证码框
  74. //如果是邮箱找回处理
  75. if (typename == "email") {
  76. _input = _inputs[1];
  77. _tempel = $$("input", {
  78. "type": "text",
  79. "onblur": function () {
  80. U.MD.U.F.checkEmail(this); $(this).parentElement(2).removeClass('U_MD_U_L_Box_Border');
  81. },
  82. "onfocus": _input.onfocus,
  83. "onkeyup": _input.onkeyup
  84. });
  85. _input.parentNode.replaceChild(_tempel, _input);
  86. _is[1].innerText = "请输入邮箱";
  87. _span[1].className = "U_MD_U_F_T_Hover";
  88. _span[0].className = "";
  89. _code.style.display = "none"; //验证码框
  90. _bottom.onclick = function () {
  91. U.MD.U.F.findPasswordByEmail(_childs[1]);
  92. }
  93. }
  94. //如果是手机找回处理
  95. else if (typename == 'security') {//更改style
  96. _input = _inputs[1];
  97. _tempel = $$("input", {
  98. "type": "text",
  99. "onblur": function () {
  100. U.MD.U.F.checkPhone(this); $(this).parentElement(2).removeClass('U_MD_U_L_Box_Border');
  101. }, //更改onblur事件
  102. "onfocus": _input.onfocus, //更改onfocus事件
  103. "onkeyup": _input.onkeyup//更改onkeyup事件
  104. });
  105. _input.parentNode.replaceChild(_tempel, _input); //替换
  106. _is[1].innerText = "请输入手机号";
  107. _span[0].className = "U_MD_U_F_T_Hover"; //更改class
  108. _span[1].className = ""; //更改class
  109. _code.style.display = "block"; //验证码框
  110. _inputs[3].value = "发送"; //验证码框内的value
  111. _inputs[3].onclick = function () {//验证码框的点击事件
  112. U.MD.U.F.userName(U.MD.U.F.phoneSend); //验证用户名是否存在
  113. }
  114. _bottom.onclick = function () {//设定提交按钮的点击事件
  115. U.MD.U.F.phoneConfirm(_childs[1]); //确认验证码
  116. }
  117. }
  118. }
  119. //#endregion
  120. //#region 手机找回
  121. /**
  122. * 手机号设置
  123. *
  124. * @param {element} 手机号设置处理
  125. */
  126. U.MD.U.F.checkSecurityCode = function (el) {
  127. var _inputs = $("input", el), //输入框
  128. _username = _inputs[0], //密码
  129. _phone = _inputs[1]; //确认手机号
  130. if (U.MD.U.F.checkUserName(_username) && U.MD.U.F.checkPhone(_phone)) {//判断账号和手机号是否输入指定格式
  131. U.MD.U.F.phoneCheckSecurityCode(["", el, _username, _phone])//调用后台处理用户的修改密码
  132. }
  133. }
  134. /**
  135. * 手机发送验证码
  136. *
  137. */
  138. U.MD.U.F.phoneSend = function () {
  139. var _username = $("#U_MD_U_L_Box_height")[0].children[0].children[0].value; //用户名
  140. U.A.Request(US.CD, [US.DB, "UseStudio_Users", "GetUserinfoByUserName", _username], function (r) {//根据用户名获取用户信息
  141. if (r.value[0] == undefined) { //判断是否输入手机号
  142. U.MD.U.R.setInputStyle($("#userphone")[0].children[0], {//给$("#userphone")[0].children[0] 设置 一个红色边框的样式 让用户知道你输入的手机号与账号设置的手机号不匹配
  143. "color": "red",
  144. "textAlign": "right",
  145. "display": "block"
  146. }, "输入的手机号与账号不匹配");
  147. return false; //如果输入手机号与账号设置的手机号不匹配 return false
  148. }
  149. if (r.value[0].UserTelephoneNumber != $("#userphone")[0].children[0].children[0].value) {//如果输入手机号与账号设置的手机号不匹配)
  150. U.MD.U.R.setInputStyle($("#userphone")[0].children[0], {//给$("#userphone")[0].children[0] 设置 一个红色边框的样式 让用户知道你输入的手机号与账号设置的手机号不匹配
  151. "color": "red",
  152. "textAlign": "right",
  153. "display": "block"
  154. }, "输入的手机号与账号不匹配");
  155. return false; //如果输入手机号与账号设置的手机号不匹配 return false
  156. }
  157. else {//如果输入手机号与账号匹配 向手机发送验证码
  158. // U.A.Request("http://api.cloudsql.1473.cn/postnumber", [$("#userphone")[0].children[0].children[0].value], function (r) {
  159. // console.log(r);
  160. // });
  161. var _xhttp = new XMLHttpRequest(); //XMLHttpRequest 对象用于在后台与服务器交换数据
  162. _xhttp.onreadystatechange = function () {//每当 readyState 属性改变时,就会调用该函数。
  163. if (this.readyState == 4) {//发送成功后
  164. if (this.status == 201) {
  165. U.Alert('发送成功'); //弹出发送成功
  166. U.MD.U.F.setTime($("#U_MD_U_L_Overflow_Code")[0].children[1].children[0]); //60秒倒计时
  167. } else {
  168. U.Alert(JSON.parse(this.response).err || '验证码发送失败,请重新发送...');
  169. }
  170. }
  171. };
  172. _xhttp.open("POST", "http://api.cloudsql.1473.cn/postnumber", true); //指定和服务器端交互的HTTP方法,URL地址及其他请求信息
  173. _xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //向一个打开但未发送的请求设置或添加一个 HTTP 请求
  174. _xhttp.withCredentials = true; //发送cookie等认证信息到服务端
  175. _xhttp.send("number=" + $("#userphone")[0].children[0].children[0].value); //$("#userphone")[0].children[0].children[0].value 发送的手机号输入的框
  176. // U.A.Request.Post("http://api.cloudsql.1473.cn/postnumber", { number: $("#userphone")[0].children[0].children[0].value }, function () {
  177. // U.MD.U.F.setTime($("#U_MD_U_L_Overflow_Code")[0].children[1].children[0]); //60秒倒计时
  178. // U.Alert('发送成功'); //弹出发送成功
  179. // });
  180. }
  181. })
  182. }
  183. /**
  184. * 手机确认验证码
  185. *
  186. * @param {element} 确认验证码的按钮
  187. */
  188. U.MD.U.F.phoneConfirm = function (el) {
  189. var _xhttp = new XMLHttpRequest(); //XMLHttpRequest 对象用于在后台与服务器交换数据
  190. _xhttp.onreadystatechange = function () {//每当 readyState 属性改变时,就会调用该函数
  191. if (this.readyState == 4) {//验证成功后
  192. if (this.status == 201) {
  193. U.MD.U.F.checkSecurityCode(el); //手机号设置
  194. U.Alert("验证成功"); //弹出验证成功
  195. } else {
  196. U.Alert(JSON.parse(this.response).err || "验证码有误");
  197. }
  198. }
  199. };
  200. _xhttp.open("POST", "http://api.cloudsql.1473.cn/verifi", true); ////指定和服务器端交互的HTTP方法,URL地址及其他请求信息
  201. _xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //向一个打开但未发送的请求设置或添加一个 HTTP 请求
  202. _xhttp.withCredentials = true; //发送cookie等认证信息到服务端
  203. _xhttp.send("code=" + $("#U_MD_U_L_Overflow_Code")[0].children[0].children[0].value); //$("#U_MD_U_L_Overflow_Code")[0].children[0].children[0].value 验证码输入的框
  204. }
  205. /**
  206. * 手机重新发送验证码倒计时
  207. * @param {object} 倒计时的对象
  208. * @param {number} 倒计时的时间(秒数)
  209. */
  210. U.MD.U.F.setTime = function (obj, countdown) {
  211. var countdown = 60;
  212. var _settime = setInterval(function () { //setInterval(需要执行的javascript代码,在执行代码前需等待的毫秒数)
  213. if (countdown == 0) { //倒计时变量为0
  214. obj.removeAttribute("disabled"); //让obj可以使用
  215. obj.value = "重新获取验证码";
  216. clearInterval(_settime); //停止倒计时
  217. return;
  218. } else {//如果countdown不等于零 每秒countdown会减少1
  219. obj.setAttribute("disabled", true); //禁用obj
  220. obj.value = "重新发送(" + countdown + ")"; //显示倒计时的事件
  221. countdown--; //倒计时时间 -1S
  222. }
  223. }, 1000);
  224. }
  225. /**
  226. * 验证用户名是否存在
  227. *
  228. * @param {function} cb 回调函数
  229. */
  230. U.MD.U.F.userName = function (cb) {
  231. U.A.Request(US.USER, ["CheckUserName", U_MD_U_L_Box_height.children[0].children[0].value], //验证用户名是否存在
  232. function (r) {//回调函数
  233. var _str = U.UF.C.jsonToStr(r.value); //序列化json为字符串
  234. if (_str == "false") {//如果用户名不存在
  235. U.MD.U.R.setInputStyle(U_MD_U_L_Box_height, {//如果不存在 用户名的框变红色 并且提示 用户名不存在
  236. "color": "red",
  237. "textAlign": "right",
  238. "display": "block"
  239. }, "用户名不存在");
  240. }
  241. cb(); //回调函数
  242. })
  243. }
  244. /**
  245. * 手机号设置处理
  246. *
  247. * @param {object} 数据库匹配手机号是否正确
  248. */
  249. U.MD.U.F.phoneCheckSecurityCode = function (r) {
  250. var _bottom,
  251. _childs,
  252. _username = r[2], //输入密码框
  253. _enterpassword = r[3], //确认密码框
  254. _el = $(_username).Parent(4)
  255. ;
  256. //如果密保匹配成功处理
  257. if (r) {
  258. //如果账号和手机号匹配成功的处理
  259. U.MD.U.F.findPasswordProcessing(_el, 1); //手机找回的步骤
  260. _bottom = $(_el.parentNode).Child()[2]; //得到确认框
  261. _childs = $("input", _el); //获取所有的输入
  262. //点击事件处理
  263. _bottom.onclick = function () {
  264. U.MD.U.F.setNewUserPassword(r, _childs[1]); //新密码设置
  265. };
  266. }
  267. else {
  268. //账号或者密保错误
  269. U.MD.U.R.setInputStyle(_enterpassword, {//给_enterpassword 设置 一个红色边框的样式 让用户知道用户输入账号或者密保错误
  270. "color": "red",
  271. "textAlign": "right",
  272. "display": "block"
  273. }, "账号或者密保错误");
  274. }
  275. }
  276. /**
  277. * 新密码设置
  278. *
  279. * @param {string} 用户id
  280. * @param {string} 密码
  281. * @param {string} 确认密码
  282. * @param {string} 用户id
  283. */
  284. U.MD.U.F.setNewUserPassword = function (userinfo, phone) {
  285. //判断用户输入的密码是否正确的处理
  286. var _newpassword = userinfo[1].children[1].children[0].children[0].children[0].value; //密码
  287. var _newpasswordt = userinfo[1].children[1].children[1].children[0].children[0].value; //再次输入密码
  288. if (U.MD.U.F.checkConfirmPassword(_newpassword, _newpasswordt)) {//如果 密码和再次输入的密码 相同
  289. U.A.Request(US.USER, ["UpdateUserPasswordByOldPhoneNumber", phone.value, _newpassword], //修改密码
  290. U.MD.U.F.asynSetNewUserPassword); //修改密码成功后执行的函数
  291. }
  292. }
  293. /**
  294. * 新密码设置
  295. *
  296. * @param {object} 设置密码成功的异步ajax对象
  297. */
  298. U.MD.U.F.asynSetNewUserPassword = function (r) {
  299. if (r.value) {
  300. U.alert("修改密码成功,请登录");
  301. U.MD.U.L.login(); //直接回到登录页面
  302. };
  303. }
  304. //#endregion
  305. //#region 通过邮箱找回
  306. /**
  307. * 通过邮箱找回
  308. *
  309. * @param {element} 输入框所在的位置
  310. */
  311. U.MD.U.F.findPasswordByEmail = function (el) {
  312. var _inputs = $("input", el),
  313. _username = _inputs[0],
  314. _email = _inputs[1];
  315. //判断是否发送邮箱
  316. if (U.MD.U.F.checkEmail(_email) && U.MD.U.F.checkUserName(_username)) {
  317. U.A.Request(US.USER, ["FindPasswordByEmail", _username.value, _email.value], U.MD.U.F.asynFindPasswordByEmail);
  318. }
  319. }
  320. /**
  321. * 通过邮箱找回
  322. *
  323. * @param {object} ajax返回的值
  324. */
  325. U.MD.U.F.asynFindPasswordByEmail = function (r) {
  326. //成功发送
  327. if (r.value == "2") {
  328. U.alert("已经发送邮箱,请及时查看密码");
  329. U.MD.U.L.init();
  330. //U.MD.U.L.login(); //直接回到登录页面
  331. }
  332. //账号不存在处理
  333. else if (r.value == "0") {
  334. U.alert("您输入的账号不存在");
  335. }
  336. //邮箱和账号不匹配处理
  337. else if (r.value == "1") {
  338. U.alert("邮箱账号不匹配");
  339. }
  340. }
  341. //#endregion
  342. //#region 密码和密保检查
  343. /**
  344. * 判断有限是否正确
  345. *
  346. * @param {object} 输入用户名的框
  347. */
  348. U.MD.U.F.checkEmail = function (inputel) {
  349. var _email = inputel.value; //获取用户名
  350. //输入为空不做变化
  351. if (_email == "") {
  352. U.MD.U.R.setInputStyle(inputel, { "display": "block", 'textAlign': 'left', 'marginRight': '0px' }, "请输入邮箱"); //输入的用户名为空的样式处理
  353. }
  354. //注册的用户不符合要求
  355. else if (!U.UF.S.Email.test(_email)) {
  356. U.MD.U.R.setInputStyle(inputel, { "display": "block", 'textAlign': 'right' }, "请输入正确邮箱"); //注册用户名不符合提示
  357. }
  358. else {
  359. return true;
  360. }
  361. return false;
  362. }
  363. /**
  364. * 手机号输入格式检查
  365. *
  366. * @param {object} 输入手机号的框
  367. */
  368. U.MD.U.F.checkPhone = function (inputel) {
  369. var _password = inputel.value; //输入手机号的value
  370. //如果没有输入手机号
  371. if (_password == "") {
  372. U.MD.U.R.setInputStyle(inputel, { "display": "block", 'textAlign': 'left', 'marginRight': '0px' }, "请输入手机号"); //没有输入手机号的提示
  373. }
  374. //输入的手机号的格式不对
  375. else if (!/^1[3|4|5|8][0-9]\d{4,8}$/.test(_password)) {
  376. U.MD.U.R.setInputStyle(inputel, { "display": "block", "color": "red", 'textAlign': 'right' }, "请输入有效手机号"); //输入的手机号有问题
  377. }
  378. else {
  379. return true;
  380. }
  381. return false;
  382. }
  383. /**
  384. * 密码输入格式检查
  385. *
  386. * @param {object} 输入密码的框
  387. */
  388. U.MD.U.F.checkPass = function (inputel) {
  389. var _password = inputel.value;
  390. //如果没有输入密码
  391. if (_password == "") {
  392. U.MD.U.R.setInputStyle(inputel, { "display": "block", 'textAlign': 'left', 'marginRight': '0px' }, "6-20位字符或数字"); //没有输入密码的提示
  393. }
  394. //输入的密码的格式不对
  395. else if (!U.UF.S.PassWord.test(_password)) {
  396. U.MD.U.R.setInputStyle(inputel, { "display": "block", "color": "red", 'textAlign': 'right' }, "6-20位字符或数字"); //输入的密码有问题
  397. }
  398. else {
  399. return true;
  400. }
  401. return false;
  402. }
  403. /**
  404. * 验证码输入格式
  405. *
  406. */
  407. U.MD.U.F.Verification = function (inputel) {
  408. var _code = inputel.value;
  409. //如果没有输入验证码
  410. if (_code == "") {
  411. U.MD.U.R.setInputStyle(inputel, { "display": "block", 'textAlign': 'left', 'marginRight': '0px' }, "请输入验证码"); //没有输入验证码的提示
  412. }
  413. //输入的验证码的格式不对
  414. else if (!/^\d{4,6}$/.test(_code)) {
  415. U.MD.U.R.setInputStyle(inputel, { "display": "block", "color": "red", 'textAlign': 'right' }, "请输入4-6位数的验证码"); //输入的验证码有问题
  416. }
  417. else {
  418. return true;
  419. }
  420. return false;
  421. }
  422. /**
  423. * 判断输入框的值是否是账号或者邮箱
  424. *
  425. */
  426. U.MD.U.F.checkUserName = function (inputel) {
  427. var _username = inputel.value; //获取用户名
  428. //输入为空不做变化
  429. if (_username == "") {
  430. U.MD.U.R.setInputStyle(inputel, { "display": "block", 'textAlign': 'left', 'marginRight': '0px' }, "云端账号"); //输入的用户名为空的样式处理
  431. }
  432. //注册的用户不符合要求
  433. else if (!U.UF.S.UserName.test(_username)) {
  434. U.MD.U.R.setInputStyle(inputel, { "display": "block", 'textAlign': 'right' }, "4-14位数字或者字母"); //注册用户名不符合提示
  435. }
  436. else {
  437. return true;
  438. }
  439. return false;
  440. }
  441. /**
  442. * 判断输入密码和确认密码是否一致处理
  443. *
  444. * @param {element} 密码
  445. * @param {element} 确认密码
  446. */
  447. U.MD.U.F.checkConfirmPassword = function (inputo, inputt) {
  448. var _password = inputt.value;
  449. //如果没有输入密码
  450. if (_password == "") {
  451. U.MD.U.R.setInputStyle(inputt, { "display": "block", 'textAlign': 'left', 'marginRight': '0px' }, "6-20位字符或数字"); //没有输入密码的提示
  452. }
  453. //输入的密码的格式不对
  454. else if (!U.UF.S.PassWord.test(_password)) {
  455. U.MD.U.R.setInputStyle(inputt, { "display": "block", "color": "red", 'textAlign': 'right' }, "6-20位字符或数字"); //输入的密码有问题
  456. }
  457. //输入密码和确认密码不相同
  458. else if (inputo.value != inputt.value) {
  459. U.MD.U.R.setInputStyle(inputt, { "display": "block", "color": "red", 'textAlign': 'right' }, "密码不一致"); //输入的密码有问题
  460. }
  461. else {
  462. return true;
  463. }
  464. return false;
  465. }
  466. //#endregion