良い経験を確立する Web 登録システム ajax_javascript スキル

*项目名称:具有良好体验度的Web注册系统
*作者:草履虫
*联系:caolvchong@gmail.com
*时间:2007-6-29
*起因和版权说明:
  1.蓝色理想上有位会员发布了个类似的系统,提问说验证码不支持firefox的刷新,于是萌生念头做一个.本系统外观(按钮取色等)借鉴了该系统,但细节实现原理并不相同(该文地址:http://bbs.blueidea.com/thread-2761325-1-4.html).
  2.另外,自己做的这个注册系统中利用了网络上的无组件验证码(作者sipo)
  3.至于密码强度的算法借鉴了蓝色理想的一篇文章(http://www.blueidea.com/tech/web/2006/4324.asp),但该算法并不十分理想,如果有更好算法的朋友不妨交流一下
*特点和知识点:
  1.AJAX验证用户名和验证码,同时异步进行用户名注册(都属于AJAX的很基础部分)
  2.支持验证码刷新(包括firefox平台下)
  3.密码,邮箱,用户名等即时检测(利用javascript DOM)
  4.HTML通过W3C Strict验证,CSS也通过W3C CSS验证(其实这个有点多余,并不完全必要)
*开发平台:Windows2003 IIS6.0 Access数据库
*工具:DreamWeaver(写ASP),Aptana(写Javascript,HTML和CSS),Emeditor(写这篇文章),Access2003(数据库)
*测试平台:Firefox2.0,Opera9.21,IE6.0,IE7.0
*演示地址:http://finish.3322.org/reg/reg.htm(短期有效,在本机上,可能访问不顺畅)
*原文地址:http://cceer.xmu.edu.cn/blog/view.asp?id=52
*补充:
  如果你使用这个注册系统,请务必注意下列问题:
    本系统没有对密码进行加密,如果需要,可以搜索MD5加密
    本系统没有进行防注入设置,如果需要,可以搜索SQL防注入
  限于本人水平上的限制,错误和不足在所难免,如果你有问题或者建议,请联系我,感谢!
*这里是效果图
限于文章长度的限制,只帖出两个js文件和一个显示注册页面,至于后台处理页面以及css文件等,请在压缩包中查看
1.reg.htm(由于BLOG会过滤,分开三个部分写) 
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 

  
  <script></script>
  <script></script>




view plaincopy to clipboardprint?

  

• 草履虫---Web注册系统   
  
•   
      注册用户名:   
            
        
      支持汉字,单词,数字,敏感字符屏蔽  
  
  
•   
      注册密码:   
            
        
      密码在6-16位之间,敏感字符屏蔽  
  
  
•   
      重复密码:   
            
        
        
  
  
•   
      邮箱:   
            
        
      email是联系重要手段  
  
  
• 验证码:   
        
        
            
          看不清楚?请点击验证码刷新  
        
  
  
•   
      相关协议:   
          接受  
          不接受    
            
  
  
•   
        
        
        
  
  
• 作者:草履虫   
  
• 时间:2007-6-28   
  
• 联系:caolvchong@gmail.com   
  
• Blog---Web2.0之路:http://cceer.xmu.edu.cn/blog/
  /li>

漢字、単語、数字、敏感な文字マスキングをサポートします🎜>
確認コードをクリックして更新してください

受け入れられません



:http://cceer.xmu.edu。 cn/blog/






2.detect.js view plaincopy to Clipboardprint?
var flag= [0,0,0,0, 0,0];
var $=function(tagName){
return document.getElementsByTagName(tagName)
} }
//----- -----同意します
function accept_info(){
flag[0]=1;
check_data();
} }
//--------- - 契約の拒否
function raise_info(){
flag[0]=0;
check_data();
} }
//----------リセット
関数(){
var info=["中国語の文字、単語、数字、機密文字のマスキングをサポート", "6 ～ 16 文字のパスワード、機密文字のマスキング","","連絡手段には電子メールが重要です", "はっきりと表示されない場合は、確認コードをクリックして更新してください。"] [].innerHTML=info[i];
flag[ i]=0;
} }
for(var i=0; i//--------メール検出
function check_email(email){
var reEmail=/^w ([- .]w )*@w ([-.] w )*.w ([-.]w )*$/;
var b_email=reEmail.test(email);
if(b_email){
$("span")[3] =" メールが利用可能です"; $("span")[3].innerHTML ="
メールエラー";
flag[1]=0;
check_data(); > function check_password(obj){
var pwd=$("input")[1].value;
var re Chinese=/[u0391-uFFE5] /; var b_chin ese=re Chinese. pwd);
var reSpace=/s /;
var b_space=reSpace.test(pwd)
if(pwd.length $("span")[1].innerHTML="
パスワードの長さは 6 未満にすることはできません";
flag[2]=0; } 中国語「;」「
」「」フラグが含まれています]=0; " "
" " check_data(); " " else if( b_space){
$("span")[1]。 innerHTML="
パスワードにはスペースを含めることはできません";
flag[2]=0;
}
//----------正当な場合にパスワードの強度を表示します var msg=new Array("
パスワードの強度が低いです", "
パスワードの強度は平均的です", "
パスワードの強度は次のとおりですstrong");
if($("input")[2].value!=""){ check_pw(); return flag[2 ]=1; check_data() ;
var ls =-1; {
;

を返します。 > }
//--------パスワードの整合性チェック
関数 check_pw(){
var pwd=$("input")[1].value.toString();
var check_pwd=$("input")[2].value.toString(); 🎜> if(flag[2]==1){
if(pwd==check_pwd){
$( "span")[2].innerHTML="
パスワードを使用できます";
flag[3]=1;
check_data();
else{
$("span")[2].innerHTML=" 2 つのパスワードは同じではありません";
flag[3]=0;
判断var reid =/^[wu0391-fuffe5] $（ "span"）[0] .innerhtml = "
違法ID名";登録されました check_data() {
if(flag[0]==1 && flag[1]==1 && flag[2]==1 && flag[3]==1 && flag[4]== 1 && フラグ[5] ==1){ put")[8].disabled=true;
----------------------------- -------

var flag=[0,0,0,0, 0,0];
var $=function(tagName){
return document.getElementsByTagName(tagName) );
}
//----------同意します Function accept_info(){
flag[0]=1;
check_data(); 🎜> }
//----------拒否プロトコル
function raise_info( ){
flag[0]=0;
//----------リセット
function restart_info(){
var info=["中国語の文字、単語、数字、機密文字のマスキングをサポート", "6 番目のパスワード - 16 ビットの間では、機密性の高い文字は保護されています。「、」、「電子メールは重要な手段です。」、「確認コードをクリックして更新してください。」]
for (var I = 0; I 0 ;i
//------ ---メール検出
Function check_email(email){ var reEmail=/^w ([- .]w )*@w ([-.] w )*.w ([-.]w ) *$/;
var b_email=reEmail.test(email);
$("span")[3]. innerHTML="メールは利用可能です"; $ ("span")[3].innerHTML="メールエラー";
flag[1]=0; 関数 check_password (obj){
var pwd=$("input")[1].value;
var re Chinese=/[u0391-uFFE5] /;
var b_chinese=re Chinese.test(pwd);
var reSpace=/s /; var b_space=reSpace.test(pwd); > $("span")[1].innerHTML="パスワードの長さは 6 未満にすることはできません"; > //--- ----合法性チェック: 漢字を含めることはできません
else if(b_chinese){
$("span")[1].innerHTML="パスワードに中国語を含めることはできません";
flag[2]= 0;
check_data();
// ----------- 正当な検出: スペースを含めることはできません
Else if (b_space) {
$ ("span")
flag[2]=0; else{
メッセージプロンプト var num = getResult (pwd);
varm msg = 新しい配列 )[1].innerHTML=msg[num];
2]=1;
check_data(); function getResult(s ){
var ls =-1;
if (s.match(/[a-z]/ig)){
}
if（s.match（/[0 -9]/ig））{
>
//--------パスワードの整合性チェック
function check_pw(){
var pwd=$("input")[1].value.toString();
var check_pwd=$("input")[2].value.toString();
if(flag[2]==1){
if(pwd==_pwd){check
$( "span"）.innerhtml = "パスワードを使用できます。 --- ユーザー名の正当性の検出
関数 Check_id (ID_name) {// は、Ajax を使用して判断されるかどうかのみです。
var Reid =/^[wu0391-uffe5]
; var b_id = reid.test（id_name）; 1 && フラグ[3]==1 && フラグ[4]==1 && フラグ[5]==1){
=false; >
else{
$("input")[8].disabled=true;
}
}

//---------------------------------- ----------------------------------
3.ajax.js プレーンコピーをクリップボード印刷に表示しますか?
function checkcode(regcode){
var xmlhttp;   
試してみましょう{
xmlhttp=new XMLHttpRequest();   
}
catch(e){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4){
if (xmlhttp.status==200){
var data=xmlhttp.responseText ;   
code_result(データ);   
}
else{
$("span")[4].innerHTML="验证码校验失败,请联系管理员";   
}
}
else{
$("span")[4].innerHTML="正在进行验证码校验...";   
}
}
xmlhttp.open("post", "check_code.asp", true);   
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');   
xmlhttp.send("regcode="escape(regcode));   
}
function code_result(data){
var resultbox=$("span")[4];   
if(data==1){
resultbox.innerHTML=' 验证码正确';   
フラグ[5]=1;   
check_data();   
}
else{
resultbox.innerHTML=' 验证码错误';   
フラグ[5]=0;   
check_data();   
}
}

//--------------------------------- ----------------------------------
function checkid(regid){
var xmlhttp;   
試してみましょう{
xmlhttp=new XMLHttpRequest();   
}
catch(e){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4){
if (xmlhttp.status==200){
var data=xmlhttp.responseText 🎜> id_result; (データ); 🎜 > else{
$("span")[0].innerHTML="ユーザー名検証中...";
else{ }
xmlhttp.open("post", "check_id.asp", true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send("regid=" エスケープ(regid) );
}
関数 id_result(data){
var resultbox=$("span")[0];
if(data==1){
resultbox.innerHTML='
ユーザー名が利用可能';
check_data();
else{
resultbox.innerHTML='
このユーザー名は登録されました';
flag[4]=0;
check_data(); -------------- ----
関数 sendinfo(regname,pwd,email){ var xmlhttp;
try{ catch(e){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
if (xmlhttp.status==200){
var data=xmlhttp.responseText;
reg_result(data); else{
$("span")[5].innerHTML="登録に失敗しました。管理者に問い合わせてください"; }
}
xmlhttp.open("post", "reg.asp", true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); .send("regname=" エスケープ(regname) "&pwd=" エスケープ(pwd) "&email=" エスケープ(メール));
}
関数 reg_result(data){
if(data== 1){
$("span")[5].innerHTML='
' $("input")[0].value ",こんにちは。ここをクリックしてログインしてください"; 🎜 > ダウンロード (すべてのファイル、写真、データベースなどを含む) ., 解凍後、IIS でテストしてください)
経験豊富な登録システム.rar