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

まず、このページを更新せずに、キーボード応答を使用してフォーム入力が正当かどうかを確認します
ユーザーは、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) {}
}
}

http://www.bkjia.com/PHPjc/327864.htmlwww.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/327864.html技術記事 1. キーボード応答を使用して、ページを更新せずにフォーム入力が正当であるかどうかを確認します。ユーザーは、onkeydown イベントおよび onkeyup イベントを通じて応答イベントをトリガーします。使用方法と onclick イベント クラス...

声明：

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