Discuz! 官方站

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 38947|回复: 10

X15注册页面 js 验证过程

[复制链接]
发表于 2011-4-1 13:01:36 | 显示全部楼层 |阅读模式
本帖最后由 beijing200808 于 2011-4-1 14:48 编辑

简单分析一下 Discuz! X1.5 注册页面的 js 验证过程
首先,看一下模板文件,template\default\member\register.htm,找到如下代码
  1. <label><em>{lang username}:</em><input type="text" id="username" name="{$_G['setting']['reginput']['username']}" autocomplete="off" size="25" maxlength="15" value="" onBlur="checkusername()" tabindex="1" class="txt" /> *</label>
复制代码
username 的标签里,有个onBlur事件,当username文本框失去焦点的时候,会触发onBlur事件,执行checkusername函数。继续跟踪 checkusername函数
  1. function checkusername() {
  2.     var username = trim($('username').value);
  3.     if(username == '' || username == lastusername) {
  4.         return;
  5.     } else {
  6.         lastusername = username;
  7.     }
  8.     var unlen = username.replace(/[^\x00-\xff]/g, "**").length;
  9.     if(unlen < 3 || unlen > 15) {
  10.         errorhandle_register(unlen < 3 ? profile_username_tooshort : profile_username_toolong, {'key':1});
  11.     return;
  12.     }
  13.     ajaxget('forum.php?mod=ajax&infloat=register&handlekey=register&action=checkusername&username=' + (BROWSER.ie && document.charset == 'utf-8' ? encodeURIComponent(username) : username), 'returnmessage4');
  14. }
复制代码
当输入的用户名长度小于3或者大于15时,会通过errorhandle_register函数提示用户名长度过短或者太长。如果用户名长度合理,然后通过ajaxget函数去异步验证用户名的合法性及唯一性。继续跟踪ajaxget函数(在 static\js\common.js 文件中)
  1. function ajaxget(url, showid, waitid, loading, display, recall) {
  2.     waitid = typeof waitid == 'undefined' || waitid === null ? showid : waitid;
  3.     var x = new Ajax();
  4.     x.setLoading(loading);
  5.     x.setWaitId(waitid);
  6.     x.display = typeof display == 'undefined' || display == null ? '' : display;
  7.     x.showId = $(showid);
  8.     if(x.showId) x.showId.orgdisplay = typeof x.showId.orgdisplay === 'undefined' ? x.showId.style.display : x.showId.orgdisplay;

  9.     if(url.substr(strlen(url) - 1) == '#') {
  10.         url = url.substr(0, strlen(url) - 1);
  11.         x.autogoto = 1;
  12.     }

  13.     var url = url + '&inajax=1&ajaxtarget=' + showid;
  14.     x.get(url, function(s, x) {
  15.         var evaled = false;
  16.         if(s.indexOf('ajaxerror') != -1) {
  17.             evalscript(s);
  18.             evaled = true;
  19.         }
  20.         if(!evaled && (typeof ajaxerror == 'undefined' || !ajaxerror)) {
  21.             if(x.showId) {
  22.                 x.showId.style.display = x.showId.orgdisplay;
  23.                 x.showId.style.display = x.display;
  24.                 x.showId.orgdisplay = x.showId.style.display;
  25.                 ajaxinnerhtml(x.showId, s);
  26.                 ajaxupdateevents(x.showId);
  27.                 if(x.autogoto) scroll(0, x.showId.offsetTop);
  28.             }
  29.         }

  30.         ajaxerror = null;
  31.         if(typeof recall == 'function') {
  32.             recall();
  33.         } else {
  34.             eval(recall);
  35.         }
  36.         if(!evaled) evalscript(s);
  37.     });
  38. }
复制代码
在这个函数里,主要的处理过程是通过 x 对象的 get 属性,在 Ajax 这个function 中,创建了 Ajax 对象 aj,然后指定get的处理方法,通过这种方式,去获取给定URL'forum.php?mod=ajax&infloat=register&handlekey=register&action=checkusername&username=' + (BROWSER.ie && document.charset == 'utf-8' ? encodeURIComponent(username) : username))的处理结果。
如果用户输入的信息有问题,ajaxget函数获取返回的结果,将其显示在returnmessage4这个标签里。例如
这是针对用户名的处理过程,邮箱的验证过程也是这样。

如果用户输入的信息在提交表单时,页面没有任何提示,当用户点击“注册”按钮时,由于form指定了onsubmit属性,所以页面并没有直接提交。
  1. <form method="post" autocomplete="off" name="register" id="registerform" enctype="multipart/form-data" onsubmit="ajaxpost('registerform', 'returnmessage4', 'returnmessage4', 'onerror');return false;" action="member.php?mod={$_G[setting][regname]}">
复制代码
onsubmit中,return false停止form的默认操作,执行ajaxpost函数,继续跟踪ajaxpost函数
  1. function ajaxpost(formid, showid, waitid, showidclass, submitbtn, recall) {
  2.     var waitid = typeof waitid == 'undefined' || waitid === null ? showid : (waitid !== '' ? waitid : '');
  3.     var showidclass = !showidclass ? '' : showidclass;
  4.     var ajaxframeid = 'ajaxframe';
  5.     var ajaxframe = $(ajaxframeid);
  6.     var formtarget = $(formid).target;

  7.     var handleResult = function() {
  8.         var s = '';
  9.         var evaled = false;

  10.         showloading('none');
  11.         try {
  12.             if(BROWSER.ie) {
  13.                 s = $(ajaxframeid).contentWindow.document.XMLDocument.text;
  14.             } else {
  15.                 if(BROWSER.safari > 0) {
  16.                 s = $(ajaxframeid).contentWindow.document.documentElement.firstChild.wholeText;
  17.             } else {
  18.                 s = $(ajaxframeid).contentWindow.document.documentElement.firstChild.nodeValue;
  19.             }
  20.         }
  21.         } catch(e) {
  22.             s = '内部错误,无法显示此内容';
  23.         }

  24.         if(s != '' && s.indexOf('ajaxerror') != -1) {
  25.             evalscript(s);
  26.             evaled = true;
  27.         }
  28.         if(showidclass) {
  29.             $(showid).className = showidclass;
  30.         }
  31.         if(submitbtn) {
  32.             submitbtn.disabled = false;
  33.         }
  34.         if(!evaled && (typeof ajaxerror == 'undefined' || !ajaxerror)) {
  35.             ajaxinnerhtml($(showid), s);
  36.         }
  37.         ajaxerror = null;
  38.         if($(formid)) $(formid).target = formtarget;
  39.         if(typeof recall == 'function') {
  40.             recall();
  41.         } else {
  42.             eval(recall);
  43.         }
  44.         if(!evaled) evalscript(s);
  45.         ajaxframe.loading = 0;
  46.         $('append_parent').removeChild(ajaxframe.parentNode);
  47.     };
  48.     if(!ajaxframe) {
  49.         var div = document.createElement('div');
  50.         div.style.display = 'none';
  51.         div.innerHTML = '<iframe name="' + ajaxframeid + '" id="' + ajaxframeid + '" loading="1"></iframe>';
  52.         $('append_parent').appendChild(div);
  53.         ajaxframe = $(ajaxframeid);
  54.     } else if(ajaxframe.loading) {
  55.         return false;
  56.     }

  57.     _attachEvent(ajaxframe, 'load', handleResult);

  58.     showloading();
  59.     $(formid).target = ajaxframeid;
  60.     var action = $(formid).getAttribute('action');
  61.     action = hostconvert(action);
  62.     $(formid).action = action.replace(/\&inajax\=1/g, '')+'&inajax=1';
  63.     $(formid).submit();
  64.     if(submitbtn) {
  65.         submitbtn.disabled = true;
  66.     }
  67.     doane();
  68.     return false;
  69. }
复制代码
在这个函数中,先想表单中动态添加了一个iframe,然后给handleresult指定了处理方法,将表单的提交目标改成了刚刚创建的iframe,重新调整了formaction ,然后执行表单的submit操作,执行完后,在iframe加载内容的同时,通过handleresult获取了iframe内容,并将返回的结果显示在returnmessage4这个标签里。例如
上面的处理过程,实际是利用 js 提交数据和处理返回结果的显示。真正的数据逻辑处理部分,还是在URL对应的PHP文件中。在这些文件中,如果执行异常,多是通过showmessage函数来返回给 js 异常信息。在showmessage函数中,又是通过
inajaxmsgtype这两个参数来具体控制返回信息的格式,其中,inajax参数已经在 js 提交数据前已经指定。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
发表于 2011-4-3 21:23:07 | 显示全部楼层
不错,学习了
回复

使用道具 举报

头像被屏蔽
发表于 2011-4-4 12:17:50 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

发表于 2011-4-4 14:12:43 | 显示全部楼层

技术贴
回复

使用道具 举报

头像被屏蔽
发表于 2011-4-5 18:16:42 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

发表于 2011-4-11 15:20:12 | 显示全部楼层
为什么我自己重写aja返回“内部错误,无法显示此内容”
郁闷
回复

使用道具 举报

发表于 2011-4-12 00:36:30 | 显示全部楼层
太好了!
回复

使用道具 举报

发表于 2011-4-15 22:06:37 | 显示全部楼层
够专业,学习了。
回复

使用道具 举报

发表于 2011-5-7 17:49:20 | 显示全部楼层
我的级别还不够  看不懂
回复

使用道具 举报

发表于 2011-6-7 23:08:34 | 显示全部楼层
{:soso__12071604136471031385_4:}
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

腾讯云「工商注册服务」全新上线!全场低至10元起,一站搞定工商服务,让创业起步更轻松

小黑屋|Discuz! 官方站 ( 粤B2-20090059-165 )star

GMT+8, 2020-9-27 19:55

Powered by Discuz! X3.3

Copyright © 2001-2019 Tencent Cloud.

快速回复 返回顶部 返回列表