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

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

ホームページ

バックエンド開発

PHPチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 13, 2016 am 10:18 AM

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 になります

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

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

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

リーリー

公開部分のjsコード:

リーリー Register.js

ユーザー名

jsコード: リーリー

checkname.phpコード: リーリー

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

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

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

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

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

用户名分析至此完毕。

邮箱栏目：

流程

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

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

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

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

如图：

<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事件 )在不同情况下触发的不同动作：

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

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

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

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

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

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

④输入时大写提示

如图：

<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>

ログイン後にコピー

<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>

ログイン後にコピー

<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

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

<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>

ログイン後にコピー

<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>

ログイン後にコピー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1657

CakePHP チュートリアル

1415

Laravel チュートリアル

1309

PHP チュートリアル

1257

C# チュートリアル

1230

Related knowledge

PHPでHTML/XMLを解析および処理するにはどうすればよいですか？ Feb 07, 2025 am 11:57 AM

このチュートリアルでは、PHPを使用してXMLドキュメントを効率的に処理する方法を示しています。 XML（拡張可能なマークアップ言語）は、人間の読みやすさとマシン解析の両方に合わせて設計された多用途のテキストベースのマークアップ言語です。一般的にデータストレージに使用されます

JSON Web Tokens（JWT）とPHP APIでのユースケースを説明してください。 Apr 05, 2025 am 12:04 AM

JWTは、JSONに基づくオープン標準であり、主にアイデンティティ認証と情報交換のために、当事者間で情報を安全に送信するために使用されます。 1。JWTは、ヘッダー、ペイロード、署名の3つの部分で構成されています。 2。JWTの実用的な原則には、JWTの生成、JWTの検証、ペイロードの解析という3つのステップが含まれます。 3. PHPでの認証にJWTを使用する場合、JWTを生成および検証でき、ユーザーの役割と許可情報を高度な使用に含めることができます。 4.一般的なエラーには、署名検証障害、トークンの有効期限、およびペイロードが大きくなります。デバッグスキルには、デバッグツールの使用とロギングが含まれます。 5.パフォーマンスの最適化とベストプラクティスには、適切な署名アルゴリズムの使用、有効期間を合理的に設定することが含まれます。

PHPでの後期静的結合を説明します（静的：:)。 Apr 03, 2025 am 12:04 AM

静的結合（静的：:) PHPで後期静的結合（LSB）を実装し、クラスを定義するのではなく、静的コンテキストで呼び出しクラスを参照できるようにします。 1）解析プロセスは実行時に実行されます。2）継承関係のコールクラスを検索します。3）パフォーマンスオーバーヘッドをもたらす可能性があります。

母音を文字列にカウントするPHPプログラム Feb 07, 2025 pm 12:12 PM

文字列は、文字、数字、シンボルを含む一連の文字です。このチュートリアルでは、さまざまな方法を使用してPHPの特定の文字列内の母音の数を計算する方法を学びます。英語の母音は、a、e、i、o、u、そしてそれらは大文字または小文字である可能性があります。母音とは何ですか？母音は、特定の発音を表すアルファベットのある文字です。大文字と小文字など、英語には5つの母音があります。 a、e、i、o、u 例1 入力：string = "tutorialspoint" 出力：6 説明する文字列「TutorialSpoint」の母音は、u、o、i、a、o、iです。合計で6元があります

PHPマジックメソッド（__construct、__destruct、__call、__get、__setなど）とは何ですか？ Apr 03, 2025 am 12:03 AM

PHPの魔法の方法は何ですか？ PHPの魔法の方法には次のものが含まれます。1。\ _ \ _コンストラクト、オブジェクトの初期化に使用されます。 2。\ _ \ _リソースのクリーンアップに使用される破壊。 3。\ _ \ _呼び出し、存在しないメソッド呼び出しを処理します。 4。\ _ \ _ get、dynamic属性アクセスを実装します。 5。\ _ \ _セット、動的属性設定を実装します。これらの方法は、特定の状況で自動的に呼び出され、コードの柔軟性と効率を向上させます。

PHPとPython：2つの一般的なプログラミング言語を比較します Apr 14, 2025 am 12:13 AM

PHPとPythonにはそれぞれ独自の利点があり、プロジェクトの要件に従って選択します。 1.PHPは、特にWebサイトの迅速な開発とメンテナンスに適しています。 2。Pythonは、データサイエンス、機械学習、人工知能に適しており、簡潔な構文を備えており、初心者に適しています。

PHP：Web開発の重要な言語 Apr 13, 2025 am 12:08 AM

PHPは、サーバー側で広く使用されているスクリプト言語で、特にWeb開発に適しています。 1.PHPは、HTMLを埋め込み、HTTP要求と応答を処理し、さまざまなデータベースをサポートできます。 2.PHPは、ダイナミックWebコンテンツ、プロセスフォームデータ、アクセスデータベースなどを生成するために使用され、強力なコミュニティサポートとオープンソースリソースを備えています。 3。PHPは解釈された言語であり、実行プロセスには語彙分析、文法分析、編集、実行が含まれます。 4.PHPは、ユーザー登録システムなどの高度なアプリケーションについてMySQLと組み合わせることができます。 5。PHPをデバッグするときは、error_reporting（）やvar_dump（）などの関数を使用できます。 6. PHPコードを最適化して、キャッシュメカニズムを使用し、データベースクエリを最適化し、組み込み関数を使用します。 7

アクション中のPHP：実際の例とアプリケーション Apr 14, 2025 am 12:19 AM

PHPは、電子商取引、コンテンツ管理システム、API開発で広く使用されています。 1）eコマース：ショッピングカート機能と支払い処理に使用。 2）コンテンツ管理システム：動的コンテンツの生成とユーザー管理に使用されます。 3）API開発：RESTFUL API開発とAPIセキュリティに使用されます。パフォーマンスの最適化とベストプラクティスを通じて、PHPアプリケーションの効率と保守性が向上します。

See all articles

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

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック