PHP+jQuery 登録モジュール開発、phpjquery モジュール開発_PHP チュートリアル

PHP+jQuery登録モジュール開発、phpjqueryモジュール開発

<span>/*</span><span>
******* 环境: Apache2.2.8 + PHP5.2.6 + MySQL5.0.51b + jQuery-1.8.3.min.js *******<br />******* 其他组件：Zend_mail( Zend_framework 1.11.11 )<br />******* Date：2014-09-25<br />******* Author：小dee<br />******* Blog：http://www.cnblogs.com/dee0912/<br /></span><span>*/</span>

簡単な PHP+jQuery 登録モジュールを作成しました。入力する必要がある列には、ユーザー名、電子メール、パスワード、反復パスワード、確認コードが含まれます。各列の機能と要件は次のとおりです。

このモジュールを作成する際、主に NetEase Registration (http://reg.163.com/reg/reg.jsp?product=urs) の機能とスタイルを参考にしました。ただし、NetEase の各列を判定するアプローチは、テキスト入力時にリアルタイムの検出結果を提供せず、列がフォーカスを失ったときにのみ検出結果を表示するというもので、このアプローチにより、入力時のユーザーの視覚が比較的統一されると思います。表示されるのは列の要件に関するプロンプトであり、他の情報が中断されることはありませんが、同時に、入力されている文字の検出プロンプトは表示されません。そこで、この機能を開発するにあたり、制限を超えたユーザー名の長さ、パスワードの長さと強度など、リアルタイムのプロンプトが必要だと思われるいくつかの情報について、対応する機能強化を行い、簡単な判断を行うようにしました。メールボックスのCaps Lock。

注: フォームの送信ボタンのタイプは送信ではなくボタンであるため、最後の列の検証コードを除き、すべての列のキーダウンはフォーカスを次の列に移動するように均一に設定されます。検証コードでキーダウンを使用します。 keydown ) はコミットイベントをトリガーします。

機能分析

ユーザー名列:

プロセス

①ページは読み込み後にフォーカスを取得し、フォーカスを取得すると最初の説明テキストが表示されます。

②ユーザー名入力ボックスをマウスでクリックすると、最初の説明テキストが表示されます。

③文字を入力すると、長さの要件を満たしているかどうかをすぐに確認するメッセージが表示されます。

④フォーカスが失われた場合、最初にそれが空であるかどうかを判断し、空ではなく、長さが要件を満たしている場合、プロンプトが空であることはできず、ユーザー名が登録されているかどうかの検出を開始します。

⑤ ユーザー名が登録されている場合は、登録できる旨のメッセージが表示されます。

⑥再びフォーカスを獲得すると、入力ボックスに入力があるかどうか、または入力が要件を満たしているかどうかに関係なく、最初の説明テキストが表示されます

⑦Enterを押すと、フォーカスがメールボックス列に移動します

写真に示すように:

詳細

任意の文字を使用できます。単語制限は次のとおりです: 漢字は 7 文字を超えてはならず、英語の文字、数字、または記号は 14 文字を超えてはなりません (Douban の登録と同様 https://www.douban.com /accounts/ register)、つまり 14 文字以下です

プレースホルダー(文字の長さ)について、漢字のプレースホルダーは2、英語(数字)のプレースホルダーは1です。文字の長さはphpステートメントを使用して計算できます リーリー 出力: 11

strlen($str) の出力は 15:4*3+3 です。UTF-8 エンコードでは中国語の文字は 3 バイトを占め、英語の文字は 1 バイトを占めます。

mb_strlen($str,'utf-8') は 7 を出力します: 漢字の長さは 1、

jquery の長さを使用してこの文字列、alert($("#uname").val().length) を出力すると、長さは 7 になります

これに注意してください。

同時に、ユーザー名の両端にスペースを含めることはできません。検出および登録中に、プログラムはユーザー名の両端のスペースを自動的にフィルターします。

register.html

ユーザー名列の HTML コード スニペット:

リーリー

register.js

公開部分のjsコード:

リーリー Register.js

ユーザー名

jsコード: リーリー

checkname.phpコード: リーリー

プロンプトテキスト (Chrome 上) ①最初にフォーカスを獲得したとき、再度フォーカスを獲得したとき、またはクリックしたとき

②入力時にリアルタイムで長さを検出

③フォーカスを失わずに空のスペースに削除する場合は、空にすることができないことを示す青いアイコンを使用します - ユーザーが入力するときに邪魔に見えません

④フォーカスを失い空ではない、登録されているかどうかを検出（非常に短く、一瞬）

⑤フォーカスが外れた時、登録可能、または登録済みの場合は空になります

用户名分析至此完毕。

邮箱栏目：

流程

①当栏目获得焦点或者点击时不论栏目为空、填写正确或者填写错误时都出现说明文字；

②用户输入时出现下拉菜单显示多种邮件后缀供用户选择；

③失去焦点时首先判断邮箱格式是否正确，如果正确则检测邮箱是否被注册 ；

④在使用回车选择下拉菜单时，将自动填充邮箱栏目；没有出现下拉菜单时，将焦点移至密码栏目

如图：

register.html 邮箱栏目HTML代码片段：

<span>1</span> <span><!--</span><span> email </span><span>--></span>            
<span>2</span> <span><</span><span>div </span><span>class</span><span>="ipt"</span><span>></span>
<span>3</span>     <span><</span><span>input </span><span>type</span><span>="text"</span><span> name</span><span>="uemail"</span><span> id</span><span>="uemail"</span><span> value</span><span>=""</span><span> placeholder</span><span>="常用邮箱地址"</span> <span>/></span>
<span>4</span>     <span><</span><span>span </span><span>id</span><span>="uemailchk"</span><span>></</span><span>span</span><span>></span>
<span>5</span>     <span><</span><span>ul </span><span>class</span><span>="autoul"</span><span>></</span><span>ul</span><span>></span>
<span>6</span> <span></</span><span>div</span><span>></span>    

下拉功能emailup.js同之前的博文《jQuery实现下拉提示且自动填充的邮箱》，略有修改，注意用回车( keydown和keyup事件 )在不同情况下触发的不同动作：

1 $(関数(){ 2 3 //メールリストを初期化する 4 var mail = new Array("sina.com","126.com","163.com","gmail.com","qq.com","hotmail.com"," sohu.com"、"139.com"、"189.cn"、"sina.cn"); 5 6 //メールリストをドロップダウンに追加します 7 for(var i=0;i){ 8 9 var $liElement = $("

@< /span>"+mail[i]+"

"); 10 11 $liElement.appendTo("ul.autoul"); 12 } 13 14 //ドロップダウン メニューは最初は非表示になっています 15 $(".autoul").hide(); 16 17 //メール入力ボックスに文字を入力してください 18 $("#uemail").keyup(function(){ 19 20 if(event.keyCode!=38 &&event.keyCode!=40 &&event.keyCode!=13){ 21 22 //メニュー表示は先頭のスペースと「@」を除く必要があります 23 if( $.trim($(this).val())!="" && $.trim(this.value).match(/^@/)==null ){ 24 25 $(".autoul").show(); 26 //修正 27 $(".autoul li").show(); 28 29 //また、元のハイライトを削除し、最初のヒントをハイライトします 30 if($(".autoul li.lihover").hasClass("lihover")) { 31 $(".autoul li.lihover").removeClass("lihover"); 32 } 33 $(".autoul li:visible:eq(0)").addClass("lihover"); 34 }else{//空か「@」で始まる場合 35 $(".autoul").hide(); 36 $(".autoul li:eq(0)").removeClass("lihover"); 37 } 38 39 // プロンプトに入力文字を入力します。 1. 「@」が表示される前に、「@」の前の文字を入力します。 2. 「@」が初めて表示され、 「@」以降の文字がある場合はパディングはありません 40 //登場@前 41 if($.trim(this.value).match(/[^@]@/)==null){//「@」のない文字が入力されているか、開始されています「@」付き 42 if($.trim(this.value).match(/^@/)==null){ 43 44 //「@」で始まらない 45 //これは実際のHTMLの状況に応じて変更する必要があります 46 $(this).siblings("ul").children("li").children(".ex").text($(this).val()); 47 } 48 }他{ 49 50 //文字入力後、最初以外の「@」が初めて表示されます 51 // @ が初めて表示される場合は、2 つの状況があります: 1. 入力を続ける、2. 入力を続けない 52 //入力を続けると 53 var str = this.value;//すべての文字が入力されました 54 var strs = new Array(); 55 strs = str.split("@");//入力された文字はすべて "@" で区切られています 56 $(".ex").text(strs[0]);//「@」より前に入力した内容 57 var len = strs[0].length;//「@」より前の入力内容の長さ 58 if(this.value.length>len+1){ 59 60 //@の後の文字列、@の前の文字列の長さに@の長さを加えたものを(len+1)番目の位置からインターセプトします 61 var strright = str.substr(len+1); 62 63 // バックスラッシュ "" に一致する通常のマスク 64 if(strright.match(/[\]/)!=null){ 65 strright.replace(/[\]/,""); 66 戻る false; 67 } 68 69 //トラバース・リー 70 $("ul.autoul li").each(function(){ 71 72 //トラバーススパン 73 //$(this) li 74 $(this).children("span.step").each(function(){ 75 76 //@ の後の文字列とメールのサフィックスを比較します 77 // 入力した文字がドロップダウン リストのメール サフィックスと一致し、最初に表示される場合に表示されます 78 //$(this) スパン.ステップ 79 if($("ul.autoul li").children("span.step").text().match(strright)!=null && $(this).text() .indexOf(strright)==0){ 80 81 //クラス showli は、入力ボックスの @ 以降の文字をメール リストと比較した後、一致するメール li に追加される属性です 82 $(this).parent().addClass("showli"); 83 //入力された文字がプロンプトメニューと完全に一致すると、ハイライトとショーリが削除され、プロンプトが非表示になります 84 85 if(strright.length>=$(this).text().length){ 86 87 $(this).parent().removeClass("showli").removeClass("lihover").hide(); 88 } 89 }他{ 90 $(this).parent().removeClass("showli"); 91 } 92 if($(this).parent().hasClass("showli")){ 93 $(this).parent().show(); 94 $(this).parent("li").parent("ul").children("li.showli:eq(0)").addClass("lihover"); 95 }他{ 96 $(this).parent().hide(); 97 $(this).parent().removeClass("lihover"); 98 } 99 }); 100 }); 101 102 //修正 103 if(!$(".autoul").children("li").hasClass("showli")){ 104 105 $(".autoul").hide(); 106 } 107 }他{ 108 //「@」以降に入力がない場合 109 $(".autoul").children().show(); 110 $("ul.autoul li").removeClass("showli"); 111 $("ul.autoul li.lihover").removeClass("lihover"); 112 $("ul.autoul li:eq(0)").addClass("lihover"); 113 } 114 } 115 }//有効キー入力イベント終了 116 117 if(event.keyCode == 8 || event.keyCode == 46){ 118 119 $(this).next().children().removeClass("lihover"); 120 $(this).next().children("li:visible:eq(0)").addClass("lihover"); 121 }//削除イベント終了 122 123 if(event.keyCode == 38){ 124 //入力ボックス内のテキストの右側にカーソルを常に置いてください 125 $(this).val($(this).val()); 126 }//方向キー ↑終了 127 128 if(event.keyCode == 13){ 129 130 // キーアップ中は、メニューを閉じることとリホバーアクションの削除に関連するアクションのみが実行され、フォーカスの転送は含まれません 131 $(".autoul").hide(); 132 $(".autoul").children().hide(); 133 $(".autoul").children().removeClass("lihover"); 134 } 135 }); 136 137 $("#uemail").keydown(function(){ 138 139 if(event.keyCode == 40){ 140 141 //キーボードの↓を押すと、選択された状態にすでにliがある場合、その状態が削除され、スタイルが次の(表示されている)liに割り当てられます 142 if ($("ul.autoul li").is(".lihover")) { 143 144 //別の（目に見える）liがある場合 145 if ($("ul.autoul li.lihover").nextAll().is("li:visible")) { 146 147 if ($("ul.autoul li.lihover").nextAll().hasClass("showli")) { 148 149 $("ul.autoul li.lihover").removeClass("lihover") 150 .nextAll(".showli:eq(0)").addClass("lihover"); 151 } else { 152 153 $("ul.autoul li.lihover").removeClass("lihover").removeClass("showli") 154 .next("li:visible").addClass("lihover"); 155 $("ul.autoul").children().show(); 156 } 157 } else { 158 159 $("ul.autoul li.lihover").removeClass("lihover"); 160 $("ul.autoul li:visible:eq(0)").addClass("lihover"); 161 } 162 } 163 }164 165 if(event.keyCode == 38){ 166 167 //キーボードの↓を押すと、選択された状態にすでにliがある場合、その状態が削除され、スタイルが次の(表示されている)liに割り当てられます 168 if($("ul.autoul li").is(".lihover")){ 169 170 //前の (表示されている) li がまだ存在する場合 171 if($("ul.autoul li.lihover").prevAll().is("li:visible")){ 172 173 174 if($("ul.autoul li.lihover").prevAll().hasClass("showli")){ 175 176 $("ul.autoul li.lihover").removeClass("lihover") 177 .prevAll(".showli:eq(0)").addClass("lihover"); 178 }他{ 179 180 $("ul.autoul li.lihover").removeClass("lihover").removeClass("showli") 181 .prev("li:visible").addClass("lihover"); 182 $("ul.autoul").children().show(); 183 } 184 }他{ 185 186 $("ul.autoul li.lihover").removeClass("lihover"); 187 $("ul.autoul li:visible:eq("+($("ul.autoul li:visible").length-1)+")").addClass("lihover"); 188 } 189 }他{ 190 191 //キーボードの↓を押すと、以前にliが選択されていない場合、最初の(表示されている)liが選択されます 192 $("ul.autoul li:visible:eq("+($("ul.autoul li:visible").length-1)+")").addClass("lihover"); 193 } 194 } 195 196 if(event.keyCode == 13){ 197 198 // キーダウン中に完了した 2 つのアクション: ① 入力 ② ドロップダウン メニューが存在するかどうかを確認 存在しない場合、フォーカスはパスワード列に移動します。ドロップダウン メニューを閉じるアクションは keyup イベントに配置されることに注意してください。即当从下拉菜单中选择邮箱的时候按回车不会触发焦点转移，而选择完毕菜单收起之后再按回车，才会触发焦点转移事件 199 if($("ul.autoul li").is(".lihover")) { 200 201 $("#uemail").val($("ul.autoul li.lihover").children(".ex").text() + "@" + $("ul.autoul li.lihover").children(".step").text()); 202 } 203 204 //把焦点移至密码栏目 205 if($(".autoul").attr("style") == "display: none;"){ 206 207 $("#upwd").focus(); 208 } 209 } 210 }); 211 212 213 //把click事件修改为mousedown,避免click事件时短暂的失去焦点而触发blur事件 214 $(".autoli").mousedown(function(){ 215 216 $("#uemail").val($(this).children(".ex").text()+$(this).children(".at").text()+$(this).children(".step").text()); 217 $(".autoul").hide(); 218 219 //修改 220 $("#uemail").focus(); 221 }).hover(function(){ 222 223 if($("ul.autoul li").hasClass("lihover")){ 224 225 $("ul.autoul li").removeClass("lihover"); 226 } 227 $(this).addClass("lihover"); 228 }); 229 230 $("body").click(function(){ 231 232 $(".autoul").hide(); 233 }); 234 }); View Code

register.js邮箱代码片段：

<span>//</span><span>邮箱下拉js单独引用emailup.js</span>
$("#uemail").focus(<span>function</span><span>(){
    
                    </span><span>var</span> noticeMsg = '用来登陆网站，接收到激活邮件才能完成注册'<span>;
                    notice($(</span>"#uemailchk"<span>),noticeMsg);
                })
                .click(</span><span>function</span><span>(){
    
                    </span><span>var</span> noticeMsg = '用来登陆网站，接收到激活邮件才能完成注册'<span>;
                    notice($(</span>"#uemailchk"<span>),noticeMsg);
                })
                .blur(</span><span>function</span><span>(){
                
                    </span><span>if</span>(<span>this</span>.value!="" && <span>this</span>.value.match(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/)!=<span>null</span><span>){
                    
                        </span><span>//</span><span>检测是否被注册</span>
                        $("#uemailchk").html("检测中...").attr("class","loading"<span>);
                        </span><span>//</span><span>ajax查询用户名是否被注册</span>
                        $.post("./../chkemail.php"<span>,{
                        
                            </span><span>//</span><span>要传递的数据</span>
                            uemail : $("#uemail"<span>).val()
                        },</span><span>function</span><span>(data,textStatus){
                            
                            </span><span>if</span>(data == 0<span>){
                            
                                </span><span>var</span> successMsg = '恭喜，该邮箱可以注册'<span>;
                                $(</span>"#uemailchk").html(successMsg).attr("class","success"<span>);

                                emailval </span>= <span>true</span><span>;
                            }</span><span>else</span> <span>if</span>(data == 1<span>){
                            
                                </span><span>var</span> errorMsg = '该邮箱已被注册'<span>;
                                error($(</span>"#uemailchk"<span>),errorMsg);
                            }</span><span>else</span><span>{
                            
                                </span><span>var</span> errorMsg = '查询出错,请联系网站管理员'<span>;
                                error($(</span>"#uemailchk"<span>),errorMsg);
                            }
                        });
                    }</span><span>else</span> <span>if</span>(<span>this</span>.value == ""<span>){
                    
                        </span><span>var</span> errorMsg = '邮箱不能为空'<span>;
                        error($(</span>"#uemailchk"<span>),errorMsg);
                    }</span><span>else</span><span>{
                    
                        </span><span>var</span> errorMsg = '请填写正确的邮箱地址'<span>;
                        $(</span>"#uemailchk").html(errorMsg).attr("class","error"<span>);
                    }
});</span>

提示文字( Chrome下 )

①获得焦点时、点击时

②输入时

③失去焦点为空、格式错误、已被注册、可以注册时分别为

邮箱功能至此结束。

密码栏目：

要求

①6-16个个字符，区分大小写（参考豆瓣和网易）

②密码不能为同一字符

③实时提示是否符合要求以及判断并显示密码强度，：

　　1.输入时如果为空(删除时)则用蓝色符号提示不能为空，超过长度时用红色符号

　　2.密码满足长度但是为相同字符的组合时：密码太简单，请尝试数字、字母和下划线的组合

　　3.密码强度判断有多种规则，有直接依据长度和组合规则作出判断，也有给每种长度和组合设置分数，通过验证实际密码的情况计算出最后分数来判断强弱。在这个模块中采用比较简单的一种形式，也是网易注册采用的方法：

　　密码满足长度且全部为不同字母、全部为不同数字或全部为不同符号时为弱：弱：试试字母、数字、符号混搭

　　 密码满足长度且为数字、字母和符号任意两种组合时为中

　　 密码满足长度且为数字、字母和符号三种组合时为强

④输入时大写提示

如图：

register.html 密码栏目HTML代码片段：

<span>1</span> <span><</span><span>div </span><span>class</span><span>="ipt"</span><span>></span>
<span>2</span>     <span><</span><span>input </span><span>type</span><span>="password"</span><span> name</span><span>="upwd"</span><span> id</span><span>="upwd"</span><span> value</span><span>=""</span><span> placeholder</span><span>="设置密码"</span> <span>/></span>
<span>3</span>     <span><</span><span>div </span><span>class</span><span>="upwdpic"</span><span>></span>
<span>4</span>        <span><</span><span>span </span><span>id</span><span>="upwdchk"</span><span>></</span><span>span</span><span>></span>
<span>5</span>        <span><</span><span>img </span><span>id</span><span>="pictie"</span> <span>/></span>
<span>6</span>     <span></</span><span>div</span><span>></span>
<span>7</span> <span></</span><span>div</span><span>></span>

register.js密码代码片段：

<span>  1</span> <span>function</span><span> noticeEasy(){
</span><span>  2</span>     
<span>  3</span>         <span>//</span><span>密码全部为相同字符或者为123456,用于keyup时的notice</span>
<span>  4</span>         <span>var</span> noticeMsg = '密码太简单，请尝试数字、字母和下划线的组合'<span>;
</span><span>  5</span>         <span>return</span> notice($("#upwdchk"<span>),noticeMsg);
</span><span>  6</span> <span>    }
</span><span>  7</span> 
<span>  8</span>     <span>function</span><span> errorEasy(){
</span><span>  9</span>     
<span> 10</span>         <span>//</span><span>密码全部为相同字符或者为123456,用于blur时的error</span>
<span> 11</span>         <span>var</span> errorMsg = '密码太简单，请尝试数字、字母和下划线的组合'<span>;
</span><span> 12</span>         <span>return</span> error($("#upwdchk"<span>),errorMsg);
</span><span> 13</span> <span>    }
</span><span> 14</span>     
<span> 15</span>     <span>//</span><span>检测密码长度函数</span>
<span> 16</span>     <span>//</span><span>检测密码长度</span>
<span> 17</span>     <span>function</span><span> upwdLen(value,func){
</span><span> 18</span>     
<span> 19</span>         <span>var</span> showMsg = $("#upwdchk"<span>);
</span><span> 20</span> 
<span> 21</span>         <span>if</span>(countLen(value) > 16<span>){
</span><span> 22</span>                         
<span> 23</span>             <span>var</span> errorMsg = '密码不能超过16个字符'<span>;
</span><span> 24</span> <span>            error(showMsg,errorMsg);
</span><span> 25</span>             
<span> 26</span>             $("#pictie"<span>).hide();
</span><span> 27</span>         }<span>else</span> <span>if</span>(countLen(value) < 6<span>){
</span><span> 28</span>         
<span> 29</span>             <span>//</span><span>使用notice更加友好</span>
<span> 30</span>             <span>var</span> noticeMsg = '密码不能少于6个字符'<span>;
</span><span> 31</span> <span>            notice(showMsg,noticeMsg);
</span><span> 32</span> 
<span> 33</span>             $("#pictie"<span>).hide();
</span><span> 34</span>         }<span>else</span> <span>if</span>(countLen(value) == 0<span>){
</span><span> 35</span>         
<span> 36</span>             <span>//</span><span>使用notice更加友好</span>
<span> 37</span>             <span>var</span> noticeMsg = '密码不能为空'<span>;
</span><span> 38</span> <span>            notice(showMsg,noticeMsg);
</span><span> 39</span> 
<span> 40</span>             $("#pictie"<span>).hide();
</span><span> 41</span>         }<span>else</span><span>{
</span><span> 42</span>         
<span> 43</span>             upwdStrong(value,func);<span>//</span><span>如果长度不成问题,则调用检测密码强弱</span>
<span> 44</span> <span>        }
</span><span> 45</span> 
<span> 46</span>         <span>return</span> countLen(value);<span>//</span><span>返回字符长度</span>
<span> 47</span> <span>    }
</span><span> 48</span> 
<span> 49</span>     <span>//</span><span>检测密码强弱</span>
<span> 50</span>     <span>function</span><span> upwdStrong(value,func){
</span><span> 51</span>     
<span> 52</span>         <span>var</span> showMsg = $("#upwdchk"<span>);
</span><span> 53</span> 
<span> 54</span>         <span>if</span>(value.match(/^(.)\1*$/)!=<span>null</span> || value.match(/^123456$/<span>)){
</span><span> 55</span>         
<span> 56</span>             <span>//</span><span>密码全部为相同字符或者为123456，调用函数noticeEasy或errorEasy</span>
<span> 57</span> <span>            func;
</span><span> 58</span>         }<span>else</span> <span>if</span>(value.match(/^[A-Za-z]+$/)!=<span>null</span> || value.match(/^\d+$/)!=<span>null</span> || value.match(/^[^A-Za-z0-9]+$/)!=<span>null</span><span>){
</span><span> 59</span> 
<span> 60</span>             <span>//</span><span>全部为相同类型的字符为弱</span>
<span> 61</span>             <span>var</span> successMsg = '弱：试试字母、数字、符号混搭'<span>;
</span><span> 62</span> <span>            success(showMsg,successMsg);
</span><span> 63</span> 
<span> 64</span>             <span>//</span><span>插入强弱条</span>
<span> 65</span>             $("#pictie").show().attr("src","images/weak.jpg"<span>);
</span><span> 66</span> 
<span> 67</span>             pwdval = <span>true</span><span>;
</span><span> 68</span> 
<span> 69</span>         }<span>else</span> <span>if</span>(value.match(/^[^A-Za-z]+$/)!=<span>null</span> || value.match(/^[^0-9]+$/)!=<span>null</span> || value.match(/^[a-zA-Z0-9]+$/)!=<span>null</span><span>){
</span><span> 70</span>         
<span> 71</span>             <span>//</span><span>任意两种不同类型字符组合为中强( 数字+符号,字母+符号,数字+字母 )</span>
<span> 72</span>             <span>var</span> successMsg = '中强：试试字母、数字、符号混搭'<span>;
</span><span> 73</span> <span>            success(showMsg,successMsg);
</span><span> 74</span> 
<span> 75</span>             $("#pictie").show().attr("src","images/normal.jpg"<span>);
</span><span> 76</span> 
<span> 77</span>             pwdval = <span>true</span><span>;
</span><span> 78</span>         }<span>else</span><span>{
</span><span> 79</span>         
<span> 80</span>             <span>//</span><span>数字、字母和符号混合</span>
<span> 81</span>             <span>var</span> successMsg = '强：请牢记您的密码'<span>;
</span><span> 82</span> <span>            success(showMsg,successMsg);
</span><span> 83</span> 
<span> 84</span>             $("#pictie").show().attr("src","images/strong.jpg"<span>);
</span><span> 85</span> 
<span> 86</span>             pwdval = <span>true</span><span>;
</span><span> 87</span> <span>        }
</span><span> 88</span> <span>    }
</span><span> 89</span>     
<span> 90</span>     $upper = $("<div id=\"upper\">大写锁定已打开</div>"<span>);
</span><span> 91</span>     
<span> 92</span>     $("#upwd").focus(<span>function</span><span>(){
</span><span> 93</span>     
<span> 94</span>                     <span>var</span> noticeMsg = '6到16个字符，区分大小写'<span>;
</span><span> 95</span>                     notice($("#upwdchk"<span>),noticeMsg);
</span><span> 96</span> 
<span> 97</span>                     $("#pictie"<span>).hide();
</span><span> 98</span> <span>            })
</span><span> 99</span>              .click(<span>function</span><span>(){
</span><span>100</span>             
<span>101</span>                     <span>var</span> noticeMsg = '6到16个字符，区分大小写'<span>;
</span><span>102</span>                     notice($("#upwdchk"<span>),noticeMsg);
</span><span>103</span> 
<span>104</span>                     $("#pictie"<span>).hide();
</span><span>105</span>             }).keydown(<span>function</span><span>(){
</span><span>106</span>             
<span>107</span>                     <span>//</span><span>把焦点移至邮箱栏目</span>
<span>108</span>                     <span>if</span>(event.keyCode == 13<span>){
</span><span>109</span>                         
<span>110</span>                         $("#rupwd"<span>).focus();
</span><span>111</span> <span>                    }
</span><span>112</span> <span>            })
</span><span>113</span>              .keyup(<span>function</span><span>(){
</span><span>114</span>              
<span>115</span>                     <span>//</span><span>判断大写是否开启</span>
<span>116</span>                     <span>//</span><span>输入密码的长度</span>
<span>117</span>                     <span>var</span> len = <span>this</span><span>.value.length;                    
</span><span>118</span>                     <span>if</span>(len!=0<span>){
</span><span>119</span> 
<span>120</span>                         <span>//</span><span>当输入的最新以为含有大写字母时说明开启了大写锁定</span>
<span>121</span>                         <span>if</span>(<span>this</span>.value[len-1].match(/[A-Z]/)!=<span>null</span><span>){
</span><span>122</span>                         
<span>123</span>                             <span>//</span><span>给出提示</span>
<span>124</span>                             $upper.insertAfter($(".upwdpic"<span>));
</span><span>125</span>                         }<span>else</span><span>{
</span><span>126</span>                         
<span>127</span>                             <span>//</span><span>移除提示</span>
<span>128</span> <span>                            $upper.remove();
</span><span>129</span> <span>                        }
</span><span>130</span>                     }<span>else</span><span>{
</span><span>131</span>                     
<span>132</span>                         <span>//</span><span>当密码框为空时移除提示</span>
<span>133</span>                         <span>if</span><span>($upper){
</span><span>134</span>                         
<span>135</span> <span>                            $upper.remove();
</span><span>136</span> <span>                        }
</span><span>137</span>                     }<span>//</span><span>判断大写开启结束</span>
<span>138</span>             
<span>139</span>                     <span>//</span><span>判断长度及强弱</span>
<span>140</span>                     upwdLen(<span>this</span><span>.value,noticeEasy());    
</span><span>141</span> <span>             })
</span><span>142</span>              <span>//</span><span>keyup事件结束</span>
<span>143</span>                .blur(<span>function</span><span>(){
</span><span>144</span>                
<span>145</span>                     upwdLen(<span>this</span><span>.value,errorEasy());
</span><span>146</span>                     <span>//</span><span>upwdLen函数中部分提示使用notice是为了keyup事件中不出现红色提示,而blur事件中则需使用error标红</span>
<span>147</span>                     <span>if</span>(<span>this</span>.value == ""<span>){
</span><span>148</span>                     
<span>149</span>                         <span>var</span> errorMsg = '密码不能为空'<span>;
</span><span>150</span>                         error($("#upwdchk"<span>),errorMsg);
</span><span>151</span> 
<span>152</span>                         $("#pictie"<span>).hide();
</span><span>153</span>                     }<span>else</span> <span>if</span>(countLen(<span>this</span>.value)<6<span>){
</span><span>154</span>                     
<span>155</span>                         <span>var</span> errorMsg = '密码不能少于6个字符'<span>;
</span><span>156</span>                         error($("#upwdchk"<span>),errorMsg);
</span><span>157</span> 
<span>158</span>                         $("#pictie"<span>).hide();
</span><span>159</span> <span>                    }
</span><span>160</span> });

大写锁定的思路是：判断输入的字符的最新一位是否是大写字母，如果是大写字母，则提示大写锁定键打开。这种方法并不十分准确，网上有一些插件能判断大写锁定，在这里只是简单地做了一下判断。

提示文字( Chrome下 )

①获得焦点、点击时

②输入时

失去焦点时与此效果相同

失去焦点时与此效果相同

失去焦点时与此效果相同

失去焦点时与此效果相同

③失去焦点为空时

④出现大写时

密码栏目至此结束。

重复密码：失去焦点时判断是否和密码一致

reister.html代码片段:

<span><</span><span>div </span><span>class</span><span>="ipt"</span><span>></span>
    <span><</span><span>input </span><span>type</span><span>="password"</span><span> name</span><span>="rupwd"</span><span> id</span><span>="rupwd"</span><span> value</span><span>=""</span><span> placeholder</span><span>="确认密码"</span> <span>/></span>
    <span><</span><span>span </span><span>id</span><span>="rupwdchk"</span><span>></</span><span>span</span><span>></span>
<span></</span><span>div</span><span>></span>

register.js代码片段：

<span> 1</span> $("#rupwd").focus(<span>function</span><span>(){
</span><span> 2</span>     
<span> 3</span>                     <span>var</span> noticeMsg = '再次输入你设置的密码'<span>;
</span><span> 4</span>                     notice($("#rupwdchk"<span>),noticeMsg);
</span><span> 5</span> <span>            })
</span><span> 6</span>                .click(<span>function</span><span>(){
</span><span> 7</span>             
<span> 8</span>                     <span>var</span> noticeMsg = '再次输入你设置的密码'<span>;
</span><span> 9</span>                     notice($("#rupwdchk"<span>),noticeMsg);
</span><span>10</span>             }).keydown(<span>function</span><span>(){
</span><span>11</span>             
<span>12</span>                     <span>//</span><span>把焦点移至邮箱栏目</span>
<span>13</span>                     <span>if</span>(event.keyCode == 13<span>){
</span><span>14</span>                         
<span>15</span>                         $("#yzm"<span>).focus();
</span><span>16</span> <span>                    }
</span><span>17</span> <span>            })
</span><span>18</span>                 .blur(<span>function</span><span>(){
</span><span>19</span>             
<span>20</span>                     <span>if</span>(<span>this</span>.value == $("#upwd").val() && <span>this</span>.value!=""<span>){
</span><span>21</span>                     
<span>22</span>                         success($("#rupwdchk"),""<span>);
</span><span>23</span> 
<span>24</span>                         rpwdval = <span>true</span><span>;
</span><span>25</span>                     }<span>else</span> <span>if</span>(<span>this</span>.value == ""<span>){
</span><span>26</span>                     
<span>27</span>                         $("#rupwdchk").html(""<span>);
</span><span>28</span>                     }<span>else</span><span>{
</span><span>29</span>                     
<span>30</span>                         <span>var</span> errorMsg = '两次输入的密码不一致'<span>;
</span><span>31</span>                         error($("#rupwdchk"<span>),errorMsg);
</span><span>32</span> <span>                    }
</span><span>33</span> });

提示文字：

①获得焦点、点击时

②失去焦点时和密码不一致、一致时分别为

至此重复密码结束。

验证码：不区分大小写

验证码采用4位，可以包含的字符为数字1-9，字母a-f

点击验证码和刷新按钮都能刷新验证码

register.html验证码代码部分：

<span>1</span> <span><</span><span>div </span><span>class</span><span>="ipt iptend"</span><span>></span>
<span>2</span>     <span><</span><span>input </span><span>type</span><span>='text' </span><span>id</span><span>='yzm' </span><span>name</span><span>='yzm' </span><span>placeholder</span><span>="验证码"</span><span>></span>
<span>3</span>     <span><</span><span>img </span><span>id</span><span>='yzmpic' </span><span>src</span><span>='' </span><span>style</span><span>="cursor:pointer"</span><span>><span> <!-- 验证码图片 --></span></span>
<span>4</span>     <span><</span><span>a </span><span>style</span><span>="cursor:pointer"</span><span> id</span><span>='changea'</span><span>></span>
<span>5</span>         <span><</span><span>img </span><span>id</span><span>="refpic"</span><span> src</span><span>="images/ref.jpg"</span><span> alt</span><span>="验证码"</span><span>> <span><!-- 验证码刷新按钮图片 --></span></span>
<span>6</span>     <span></</span><span>a</span><span>></span>
<span>7</span>     <span><</span><span>span </span><span>id</span><span>='yzmchk'</span><span>></</span><span>span</span><span>></span>
<span>8</span>     <span><</span><span>input </span><span>type</span><span>='hidden' </span><span>id</span><span>='yzmHiddenNum' </span><span>name</span><span>='yzmHiddenNum' </span><span>value</span><span>=''</span><span>> <span><!-- 隐藏域，内容是验证码输出的数字，用户输入的字符与其进行对比 --></span></span>
<span>9</span> <span></</span><span>div</span><span>></span>

register.js验证码部分:

<span> 1</span> <span>//</span><span>認証コードボタン</span>
<span> 2</span> $("#refpic").hover(<span>function</span><span>(){
</span><span> 3</span>
<span> 4</span> $(<span>this</span>).attr("src","images/refhover.jpg"<span>);
</span><span> 5</span> },<span>関数</span><span>(){
</span><span> 6</span>
<span> 7</span> $(<span>this</span>).attr("src","images/ref.jpg"<span>);
</span><span> 8</span> }).mousedown(<span>function</span><span>(){
</span><span> 9</span>
<span> 10</span> $(<span>this</span>).attr("src","images/refclick.jpg"<span>);
</span><span> 11</span> }).mouseup(<span>function</span><span>(){
</span><span> 12</span>
<span> 13</span> $(<span>this</span>).attr("src","images/ref.jpg"<span>);
</span><span> 14</span> <span> });
</span><span> 15</span>
<span> 16</span> <span>//</span><span>認証コード生成機能</span>
<span> 17</span> <span>関数</span><span> showval() {
</span><span>18</span>
<span> 19</span> 番号 = ''<span>;
</span><span> 20</span> <span>for</span> (i = 0; i ) {
<span> 21</span>
<span> 22</span> tmp = Math.ceil(Math.random() * 15);<span>//</span><span>Math.ceil は 0 から 1 までの乱数を受け取ります</span>
<span> 23</span> <span>if</span> (tmp > 9<span>) {
</span><span> 24</span> <span>スイッチ</span><span> (tmp) {
</span><span> 25</span> <span>ケース</span>(10<span>):
</span><span> 26</span> num += 'a'<span>;
</span><span> 27</span> <span>休憩</span><span>;
</span><span> 28</span> <span>ケース</span>(11<span>):
</span><span> 29</span> num += 'b'<span>;
</span><span> 30</span> <span>休憩</span><span>;
</span><span> 31</span> <span>ケース</span>(12<span>):
</span><span> 32</span> num += 'c'<span>;
</span><span> 33</span> <span>休憩</span><span>;
</span><span> 34</span> <span>ケース</span>(13<span>):
</span><span> 35</span> num += 'd'<span>;
</span><span> 36</span> <span>休憩</span><span>;
</span><span> 37</span> <span>ケース</span>(14<span>):
</span><span> 38</span> num += 'e'<span>;
</span><span> 39</span> <span>休憩</span><span>;
</span><span> 40</span> <span>ケース</span>(15<span>):
</span><span> 41</span> num += 'f'<span>;
</span><span> 42</span> <span>休憩</span><span>;
</span><span> 43</span> <span> }
</span><span> 44</span> } <span>else</span><span> {
</span><span> 45</span> num +=<span> tmp;
</span><span> 46</span> <span> }
</span><span> 47</span>
<span> 48</span> $('#yzmpic').attr("src","../valcode.php?num="+<span>num);
</span><span> 49</span> <span> }
</span><span> 50</span> $('#yzmHiddenNum'<span>).val(num);
</span><span> 51</span> <span> }
</span><span> 52</span>
<span> 53</span> <span>//</span><span>確認コードを生成し、確認コードを更新します</span>
<span> 54</span> <span> showval();
</span><span> 55</span> $('#yzmpic').click(<span>function</span><span>(){
</span><span> 56</span>
<span> 57</span> <span> showval();
</span><span> 58</span> <span> });
</span><span> 59</span> $('#changea').click(<span>function</span><span>(){
</span><span> 60</span>
<span> 61</span> <span> showval();
</span><span> 62</span> <span> });
</span><span> 63</span>
<span> 64</span> <span>//</span><span>認証コードの確認</span>
<span> 65</span> <span>関数</span><span> yzmchk(){
</span><span> 66</span>
<span> 67</span> <span>if</span>($("#yzm").val() == ""<span>){
</span><span> 68</span>
<span> 69</span> <span>var</span> errorMsg = '確認コードを空にすることはできません' <span>;
</span><span> 70</span> error($("#yzmchk"<span>),errorMsg);
</span><span> 71</span> }<span>else</span> <span>if</span>($("#yzm").val().toLowerCase()!=$("#yzmHiddenNum"<span>).val()){
</span><span> 72</span>
<span> 73</span>