X15注册页面 js 验证过程

简单分析一下 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. 
   
10.     if(url.substr(strlen(url) - 1) == '#') {
    
11.         url = url.substr(0, strlen(url) - 1);
    
12.         x.autogoto = 1;
    
13.     }
    
14. 
    
15.     var url = url + '&inajax=1&ajaxtarget=' + showid;
    
16.     x.get(url, function(s, x) {
    
17.         var evaled = false;
    
18.         if(s.indexOf('ajaxerror') != -1) {
    
19.             evalscript(s);
    
20.             evaled = true;
    
21.         }
    
22.         if(!evaled && (typeof ajaxerror == 'undefined' || !ajaxerror)) {
    
23.             if(x.showId) {
    
24.                 x.showId.style.display = x.showId.orgdisplay;
    
25.                 x.showId.style.display = x.display;
    
26.                 x.showId.orgdisplay = x.showId.style.display;
    
27.                 ajaxinnerhtml(x.showId, s);
    
28.                 ajaxupdateevents(x.showId);
    
29.                 if(x.autogoto) scroll(0, x.showId.offsetTop);
    
30.             }
    
31.         }
    
32. 
    
33.         ajaxerror = null;
    
34.         if(typeof recall == 'function') {
    
35.             recall();
    
36.         } else {
    
37.             eval(recall);
    
38.         }
    
39.         if(!evaled) evalscript(s);
    
40.     });
    
41. }

复制代码

在这个函数里，主要的处理过程是通过 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. 
   
8.     var handleResult = function() {
   
9.         var s = '';
   
10.         var evaled = false;
    
11. 
    
12.         showloading('none');
    
13.         try {
    
14.             if(BROWSER.ie) {
    
15.                 s = $(ajaxframeid).contentWindow.document.XMLDocument.text;
    
16.             } else {
    
17.                 if(BROWSER.safari > 0) {
    
18.                 s = $(ajaxframeid).contentWindow.document.documentElement.firstChild.wholeText;
    
19.             } else {
    
20.                 s = $(ajaxframeid).contentWindow.document.documentElement.firstChild.nodeValue;
    
21.             }
    
22.         }
    
23.         } catch(e) {
    
24.             s = '内部错误，无法显示此内容';
    
25.         }
    
26. 
    
27.         if(s != '' && s.indexOf('ajaxerror') != -1) {
    
28.             evalscript(s);
    
29.             evaled = true;
    
30.         }
    
31.         if(showidclass) {
    
32.             $(showid).className = showidclass;
    
33.         }
    
34.         if(submitbtn) {
    
35.             submitbtn.disabled = false;
    
36.         }
    
37.         if(!evaled && (typeof ajaxerror == 'undefined' || !ajaxerror)) {
    
38.             ajaxinnerhtml($(showid), s);
    
39.         }
    
40.         ajaxerror = null;
    
41.         if($(formid)) $(formid).target = formtarget;
    
42.         if(typeof recall == 'function') {
    
43.             recall();
    
44.         } else {
    
45.             eval(recall);
    
46.         }
    
47.         if(!evaled) evalscript(s);
    
48.         ajaxframe.loading = 0;
    
49.         $('append_parent').removeChild(ajaxframe.parentNode);
    
50.     };
    
51.     if(!ajaxframe) {
    
52.         var div = document.createElement('div');
    
53.         div.style.display = 'none';
    
54.         div.innerHTML = '<iframe name="' + ajaxframeid + '" id="' + ajaxframeid + '" loading="1"></iframe>';
    
55.         $('append_parent').appendChild(div);
    
56.         ajaxframe = $(ajaxframeid);
    
57.     } else if(ajaxframe.loading) {
    
58.         return false;
    
59.     }
    
60. 
    
61.     _attachEvent(ajaxframe, 'load', handleResult);
    
62. 
    
63.     showloading();
    
64.     $(formid).target = ajaxframeid;
    
65.     var action = $(formid).getAttribute('action');
    
66.     action = hostconvert(action);
    
67.     $(formid).action = action.replace(/\&inajax\=1/g, '')+'&inajax=1';
    
68.     $(formid).submit();
    
69.     if(submitbtn) {
    
70.         submitbtn.disabled = true;
    
71.     }
    
72.     doane();
    
73.     return false;
    
74. }

复制代码

在这个函数中，先想表单中动态添加了一个iframe，然后给handleresult指定了处理方法，将表单的提交目标改成了刚刚创建的iframe，重新调整了form的action ，然后执行表单的submit操作，执行完后，在iframe加载内容的同时，通过handleresult获取了iframe内容，并将返回的结果显示在returnmessage4这个标签里。例如

上面的处理过程，实际是利用 js 提交数据和处理返回结果的显示。真正的数据逻辑处理部分，还是在URL对应的PHP文件中。在这些文件中，如果执行异常，多是通过showmessage函数来返回给 js 异常信息。在showmessage函数中，又是通过
inajax、msgtype这两个参数来具体控制返回信息的格式，其中，inajax参数已经在 js 提交数据前已经指定。

不错，学习了

技术贴

为什么我自己重写aja返回“内部错误，无法显示此内容”
郁闷

太好了！

够专业，学习了。

我的级别还不够  看不懂

{:soso__12071604136471031385_4:}