PHP+Ajaxによるフォームバリデーションの詳細説明-PHP开发-php.cn

PHP+Ajaxによるフォームバリデーションの詳細説明

高洛峰

リリース： 2016-12-23 17:42:04

オリジナル

1733 人が閲覧しました

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

<script type="text/javascript">
   ...
   function refer(){
   ...
   }
</script>
<input type="text" onkeydown="refer()"/>

ログイン後にコピー

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

window.onload = function(){
 $(&#39;regname&#39;).onkeydown = function (){
  name = $(&#39;regname&#39;).value;
 }
}

ログイン後にコピー

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

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

function $(id){
 return document.getElementById(id);
}
window.onload事件，表示当前窗口被载入时触发。function(){...}表示当前页面被载入时所要进行的操作。
window.onload = function(){
 ...
}

ログイン後にコピー

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

$(&#39;regname&#39;).focus();
var cname1,cname2,cpwd1,cpwd2;  //声明了5个变量，表示要检测的5项数据chkreg()函数是每一次触发键盘事件后都要调用的，该函数判断5个变量的值，只有当所有变量都为"yes"时，注册按钮才会被激活。 
function chkreg(){
 if((cname1 == &#39;yes&#39;) && (cname2 == &#39;yes&#39;) && (cpwd1 == &#39;yes&#39;) && (cpwd2 == &#39;yes&#39;)){
  $(&#39;regbtn&#39;).disabled = false;
 }else{
  $(&#39;regbtn&#39;).disabled = true;
 }
}

ログイン後にコピー

次に、ユーザーが登録名を入力すると、関数はユーザーの入力ごとに定期的に判断して設定します。結果に応じて cname1 の値が異なります。

$(&#39;regname&#39;).onkeyup = function (){
 name = $(&#39;regname&#39;).value;  //获取注册名称
 cname2 = &#39;&#39;;
 if(name.match(/^[a-zA-Z_]*/) == &#39;&#39;){
  $(&#39;namediv&#39;).innerHTML = &#39;<font color=red>必须以字母或下划线开头</font>&#39;;
  cname1 = &#39;&#39;;
 }else if(name.length <= 3){
  $(&#39;namediv&#39;).innerHTML = &#39;<font color=red>注册名称必须大于3位</font>&#39;;
  cname1 = &#39;&#39;;
 }else{
  $(&#39;namediv&#39;).innerHTML = &#39;<font color=green>注册名称符合标准</font>&#39;;
  cname1 = &#39;yes&#39;;
 }
 chkreg(); //调用chkreg()函数，判断5个变量是否正确
}

ログイン後にコピー

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

$(&#39;regname&#39;).onblur = function(){
 name = $(&#39;regname&#39;).value;  //获取注册名称
 if(cname1 == &#39;yes&#39;){ //当用户名称的格式输入合格后才进行这一步
  xmlhttp.open(&#39;get&#39;,&#39;chkname.php?name=&#39;+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 == &#39;1&#39;){  //chkname.php页面查找数据库，数据库没有该用户返回1
      $(&#39;namediv&#39;).innerHTML="<font color=green>恭喜您，该用户名可以使用!</font>";
      cname2 = &#39;yes&#39;;
     }else if(msg == &#39;2&#39;){ //数据库存在该用户返回0
      $(&#39;namediv&#39;).innerHTML="<font color=red>用户名被占用！</font>";
      cname2 = &#39;&#39;;
     }else{
      $(&#39;namediv&#39;).innerHTML="<font color=red>"+msg+"</font>";
      cname2 = &#39;&#39;;
     }
    }
   }
  }
  xmlhttp.send(null);
  chkreg(); //检测是否激活注册按钮
 }
}

ログイン後にコピー

パスワードを確認するパスワードを確認するときは、パスワードの長さを制限するだけでなく、パスワードの強度も判断できます。

$(&#39;regpwd1&#39;).onkeyup = function(){
 pwd = $(&#39;regpwd1&#39;).value;
 pwd2 = $(&#39;regpwd2&#39;).value;
 if(pwd.length < 6){
  $(&#39;pwddiv1&#39;).innerHTML = &#39;<font color=red>密码长度最少需要6位</font>&#39;;
  cpwd1 = &#39;&#39;;
 }else if(pwd.length >= 6 && pwd.length < 12){
  $(&#39;pwddiv1&#39;).innerHTML = &#39;<font color=green>密码符合要求。密码强度：弱</font>&#39;;
  cpwd1 = &#39;yes&#39;;
 }else if((pwd.match(/^[0-9]*$/)!=null) || (pwd.match(/^[a-zA-Z]*$/) != null )){
  $(&#39;pwddiv1&#39;).innerHTML = &#39;<font color=green>密码符合要求。密码强度：中</font>&#39;;
  cpwd1 = &#39;yes&#39;;
 }else{
  $(&#39;pwddiv1&#39;).innerHTML = &#39;<font color=green>密码符合要求。密码强度：高</font>&#39;;
  cpwd1 = &#39;yes&#39;;
 }
 if(pwd2 != &#39;&#39; && pwd != pwd2){
  $(&#39;pwddiv2&#39;).innerHTML = &#39;<font color=red>两次密码不一致!</font>&#39;;
  cpwd2 = &#39;&#39;;
 }else if(pwd2 != &#39;&#39; && pwd == pwd2){
  $(&#39;pwddiv2&#39;).innerHTML = &#39;<font color=green>密码输入正确</font>&#39;;
  cpwd2 = &#39;yes&#39;;
 }
 chkreg();
}

ログイン後にコピー

2回目のパスワード判定は比較的簡単で、2回目のパスワード入力が1回目の入力と等しいかどうかを判定するだけです。

$(&#39;regpwd2&#39;).onkeyup = function(){
 pwd1 = $(&#39;regpwd1&#39;).value;
 pwd2 = $(&#39;regpwd2&#39;).value;
 if(pwd1 != pwd2){
  $(&#39;pwddiv2&#39;).innerHTML = &#39;<font color=red>两次密码不一致!</font>&#39;;
  cpwd2 = &#39;&#39;;
 }else{
  $(&#39;pwddiv2&#39;).innerHTML = &#39;<font color=green>密码输入正确</font>&#39;;
  cpwd2 = &#39;yes&#39;;
 }
 chkreg();
}

ログイン後にコピー

上記の情報を入力する必要があります。さらに詳細な情報を入力したい場合は、「詳細ボタン」をクリックしてください

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

ログイン後にコピー

メール形式の確認、入力文字列には@と.が含まれている必要があります。 2 つの文字を同時に使用する文字列の位置を先頭や末尾にしたり、連結したりすることはできません

$(&#39;email&#39;).onkeyup = function(){
 emailreg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
 $(&#39;email&#39;).value.match(emailreg);
 if($(&#39;email&#39;).value.match(emailreg) == null){
  $(&#39;emaildiv&#39;).innerHTML = &#39;<font color=red>错误的email格式</font>&#39;;
  cemail = &#39;&#39;;
 }else{
  $(&#39;emaildiv&#39;).innerHTML = &#39;<font color=green>输入正确</font>&#39;;
  cemail = &#39;yes&#39;;

 }
 chkreg();

ログイン後にコピー

3、ユーザー名 (chkname.php) を検出します

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

ログイン後にコピー

4、XMLHttpRequest 関数を初期化します

// JavaScript Document
var xmlhttp = false;
if (window.XMLHttpRequest) {          //Mozilla、Safari等浏览器
 xmlhttp = new XMLHttpRequest();
} 
else if (window.ActiveXObject) {         //IE浏览器
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
 }
}

ログイン後にコピー

PHP+Ajaxによるフォーム検証についてさらに詳しく解説関連記事はPHP中国語サイトに注目！