PHP+Ajax_PHPチュートリアルに基づいたフォーム検証の詳細な説明-PHPチュートリアル-php.cn

PHP+Ajax_PHPチュートリアルに基づいたフォーム検証の詳細な説明

WBOY

リリース： 2016-07-21 15:03:16

オリジナル

796 人が閲覧しました

まず、このページを更新せずに、キーボード応答を使用してフォーム入力が正当かどうかを確認します
ユーザーは、onkeydown イベントと onkeyup イベントを通じて応答イベントをトリガーします。使用方法はonclickイベントと同様です。 onkeydown は、キーボードのキーが押されたときにトリガーされることを意味し、onkeyup はその逆で、キーボードのキーが押されてから離されたときにトリガーされます。
一般的に使用される 2 つの呼び出し方法:
(1) ユーザーが情報の入力を完了して任意のキーをクリックすると、onkeydown イベントがトリガーされ、refer() 関数が呼び出されます。
この方法は最も単純で直接的です。形式は次のとおりです:

コードをコピーしますコードは次のとおりです:

(2) window.onload による読み込み、ページが読み込まれると、イベントが読み込まれます。ユーザーが情報を入力すると、文字が入力されるたびにこのイベントがトリガーされ、イベントによって呼び出される関数でユーザーの入力情報が判断されます。

コードをコピーしますコードは次のとおりです:

window.onload = function(){
 $('regname').onkeydown = function (){
 name = $('regname') .value;
 }
}

onkeydown イベントを使用すると、キー (event.keyCode==13)、スペースバー (event.keyCode==32)、< などの特定のキーを制御することもできます。 Ctrl> キー、キー、およびその他すべてのキーの押下は、onkeydown イベントの keyCode 属性を使用して実現されます。 KeyCode プロパティは、ユーザーがどのキーを押したかを認識します。

2番目、登録情報の検証
一般関数は、トリガーされたID要素オブジェクトを返します

コードをコピーコードは次のとおりです:

function $(id){
 return document.getElementById( id) ;
}
window.onload イベント。現在のウィンドウがロードされたときにトリガーされることを示します。 function(){...} は、現在のページがロードされたときに実行される操作を表します。 
window.onload = function(){
...
}

function() 関数分析;
まず、ユーザーの操作を容易にするために、ユーザー名のテキストボックスに注目します。次に、検出される 5 つのデータの結果を表す 5 つの変数が宣言されます。テストデータが修飾されたら、変数値を「yes」に設定します。

コードをコピーしますコードは次のとおりです:

$('regname').focus();
var cname1,cname2 ,cpwd1,cpwd2 ; //5 つの変数が宣言され、検出される 5 つのデータ項目が示されます。この関数は、キーボード イベントがトリガーされるたびに呼び出され、5 つの変数の値を決定します。すべての変数が "yes" の場合にのみ、登録ボタンがアクティブになります。 
関数 chkreg(){
 if((cname1 == 'yes') && (cname2 == 'yes') && (cpwd1 == 'yes') && (cpwd2 == 'yes')){
 $(' regbtn').disabled = false;
 }else{
 $('regbtn').disabled = true;
 }
}

ユーザーが登録名を入力すると、この関数は以下で検証されます。すべての入力に対して定期的に判定を行い、その結果に基づいて異なる cname1 値を設定します。

コードをコピーしますコードは次のとおりです:

$('regname').onkeyup = function (){
name = $('regname').value //登録された名前を取得します
cname2 = '';
if(name.match(/^[a-zA-Z_]*/) == ''){
$('namediv').innerHTML = ' を開始する必要があります文字またはアンダースコアを含む< ;/font>';
cname1 = '';
}else if(name.length <= 3){
$('namediv').innerHTML = '登録名は 3 文字以上である必要があります ';
cname1 = '';
}else{
$('namediv').innerHTML = '登録名は標準に準拠しています< ;/font>';
cname1 = ' yes';
}
chkreg(); // chkreg() 関数を呼び出して、5 つの変数が正しいかどうかを判断します
}

ユーザー名テキストボックスがフォーカスを失うとき、つまりユーザーが入力を完了してページ上の他の要素に移動すると、ユーザー名が繰り返されているかどうかが検出されます。ユーザー名判定はAjax技術を利用してchkname.phpを呼び出し（このページのユーザー名検証コードは後ほど掲載します）、chkname.phpの戻り値をもとに判定結果をdivタグに表示します。

コードをコピーしますコードは次のとおりです:

$('regname').onblur = function(){
 name = $('regname').value //登録された名前を取得します
 if(cname1 == 'yes'){ //ユーザー名の形式入力が修飾されている場合のみこのステップに進みます
 xmlhttp.open('get','chkname.php?name='+name,true); //open() は XMLHttpRequest の初期化接続を作成し、Ajax は新しいリクエストを作成します
 xmlhttp.onreadystatechange = function(){ //XMLHttpRequest が非同期送信 (false) として指定されている場合、状態変化が発生すると、オブジェクトは指定された関数を呼び出しますonreadystatechange
 if(xmlhttp.readyState == 4){ //XMLHttpRequest の処理ステータス、4 は処理完了を意味します 
 If(xmlhttp.status == 200){ //サーバー応答の HTTP コード、200 は正常を意味します 
 var msg = xmlhttp。 responseText; // 応答ページを取得します 
 if(msg == '1'){ //chkname.php ページの内容はデータベースを検索しますが、データベースにはユーザーが存在せず、1
 $('namediv') が返されます。 innerHTML="おめでとうございます。ユーザー名を使用できます!";
 cname2 = 'yes';
 }else if(msg == '2'){ //Theユーザーはデータベースに存在し、0 を返します
 $('namediv').innerHTML= "ユーザー名が占有されています!";
 msg+"";
 cname2 = '';
 }
 }
 }
 }
 
 パスワードを検証するときは、パスワードの長さを制限するだけでなく、パスワードの強度を判断することもできます。 



コードをコピーします

コードは次のとおりです:

$('regpwd1').onkeyup = function(){ pwd = $('regpwd1').value; pwd2 = $('regpwd2 ').value ; if(pwd.length < 6){ $('pwddiv1').innerHTML = 'パスワードの長さは少なくとも 6 文字である必要があります';

cpwd1 = '';

 }else if(pwd.length >= 6 && pwd.length < 12){
 $('pwddiv1').innerHTML = 'パスワードは要件を満たしています。パスワードの強度: 弱い';
 cpwd1 = 'yes';
 }else if((pwd.match(/^[0-9]*$/)!=null) || (pwd.match( / ^[a-zA-Z]*$/) != null )){
 $('pwddiv1').innerHTML = 'パスワードは要件を満たしています。パスワードの強度: 中';
 cpwd1 = 'yes';
}else{
 $('pwddiv1').innerHTML = 'パスワードは要件を満たしています。パスワードの強度: 高';
 cpwd1 = 'yes';
}
 if(pwd2 != '' && pwd != pwd2){
 $('pwddiv2').innerHTML = '2 つのパスワードは矛盾しています!';
 cpwd2 = '';
 }else if(pwd2 != '' && pwd == pwd2){
 $('pwddiv2').innerHTML = '< ;font color=green>パスワードは正しく入力されています';
 cpwd2 = 'yes';
}
 chkreg();
}


2回目のパスワード判定は比較的簡単で、パスワードが入力されているかどうかを判定するだけです。 2 回目は最初の入力と同じです。 



コードをコピーします

コードは次のとおりです:

$('regpwd2').onkeyup = function(){ pwd1 = $('regpwd1').value; pwd2 = $('regpwd2 ').value ; if(pwd1 != pwd2){ $('pwddiv2').innerHTML = '2 つのパスワードが一致しません!';

cpwd2 = '' ;

}else{
$('pwddiv2').innerHTML = 'パスワードは正しく入力されました';
cpwd2 = 'yes';
}
chkreg();
}

上記の情報は必ず入力してください。さらに詳しい情報を入力したい場合は、「詳細ボタン」をクリックしてください

コードをコピーコードは次のとおりです:

$('morebtn ').onclick = function() {
 if($('morediv').style.display == ''){
 $('morediv').style.display = 'none';
 }else{
 $ ('morediv').style.display = '';
 }
}

電子メール形式の検証。入力文字列には @ と . が含まれている必要があり、これら 2 つの文字列の位置を先頭や末尾にすることはできません。一緒に接続します

コードをコピーするコードは次のとおりです:

$('email').onkeyup = function(){
 emailreg = /^w+([-+.]w+)*@w+( [-.]w+)*.w+( [-.]w+)*$/;
 $('email').value.match(emailreg);
 if($('email').value.match(emailreg) ) == null){
 $(' emaildiv').innerHTML = '間違ったメール形式';
 cemail = '';
 }else{
 $('emaildiv') .innerHTML = '正しく入力してください';
 cemail = 'yes';

}
 chkreg();
}

3、ユーザー名（chkname.php）を検出します

コードをコピーしますコードは次のとおりです:

session_start();
include_once "conn/conn.php";
$reback = '0';
$sql = "select * from tb_member where name=' ".$_GET['name']."'";
$num = $conne->getRowsNum($sql);
if($num == 1){
 $reback = '2';
}else if($num == 0){
 $reback = '1';
}else{
 $reback = $conne->msg_error();
}
echo $reback ;
?>

4. XMLHttpRequest 関数の初期化

コードをコピーしますコードは次のとおりです:

// JavaScript Document
var xmlhttp = false;
if (window. 
 xmlhttp = new XMLHttpRequest();
} 
else if (window.ActiveXObject) { //IE ブラウザ
 try {
 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
 try {
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 } catch (e) {}
 }
}