Ausführliche Erläuterung der Formularvalidierung basierend auf PHP+Ajax-PHP开发-php.cn

Ausführliche Erläuterung der Formularvalidierung basierend auf PHP+Ajax

高洛峰

Freigeben： 2016-12-23 17:42:04

Original

1735 Leute haben es durchsucht

Verwenden Sie zunächst die Tastaturantwort, um zu überprüfen, ob die Formulareingabe zulässig ist, ohne die Seite zu aktualisieren.
Benutzer lösen Antwortereignisse durch onkeydown- und onkeyup-Ereignisse aus. Die Verwendungsmethode ähnelt dem Onclick-Ereignis. onkeydown bedeutet, dass es ausgelöst wird, wenn eine Taste auf der Tastatur gedrückt wird, und onkeyup ist genau das Gegenteil: es wird ausgelöst, wenn eine Taste auf der Tastatur gedrückt und dann angehoben wird.
Zwei gängige Aufrufmethoden:
(1) Fügen Sie das Ereignis zum Seitenelement hinzu. Wenn der Benutzer die Eingabe der Informationen abgeschlossen hat und auf eine beliebige Taste klickt, wird das Ereignis onkeydown ausgelöst und die Funktion refer() aufgerufen.
Diese Methode ist die einfachste und direkteste und hat das folgende Format:

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

Nach dem Login kopieren

(2) Laden über window.onload. Wenn die Seite geladen wird, wird das Ereignis geladen. Wenn der Benutzer Informationen eingibt, wird dieses Ereignis jedes Mal ausgelöst, wenn ein Buchstabe eingegeben wird. In der vom Ereignis aufgerufenen Funktion werden die Eingabeinformationen des Benutzers beurteilt.

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

Nach dem Login kopieren

Mit dem onkeydown-Ereignis können auch bestimmte Tasten gesteuert werden, einschließlich der ;-Taste, -Taste usw. Dies wird durch die Verwendung des keyCode-Attributs im onkeydown-Ereignis erreicht. Die KeyCode-Eigenschaft weiß, welche Taste der Benutzer gedrückt hat.

Zweitens Überprüfung der Registrierungsinformationen
Universalfunktion, gibt das ausgelöste ID-Elementobjekt zurück

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

Nach dem Login kopieren

Funktionsanalyse ()
Konzentrieren Sie sich zunächst auf das Textfeld des Benutzernamens erleichtern die Benutzerbedienung. Als nächstes werden 5 Variablen deklariert, die die Ergebnisse der 5 zu erkennenden Daten darstellen. Wenn die Testdaten qualifiziert sind, setzen Sie den Variablenwert auf „Ja“.

$(&#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;
 }
}

Nach dem Login kopieren

Der Benutzername wird unten überprüft. Wenn der Benutzer den Registrierungsnamen eingibt, führt diese Funktion eine Regularisierung für jede Eingabe durch Benutzer beurteilen und legen Sie unterschiedliche cname1-Werte basierend auf den Ergebnissen fest.

$(&#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个变量是否正确
}

Nach dem Login kopieren

Wenn das Textfeld „Benutzername“ den Fokus verliert, das heißt, wenn der Benutzer seine Eingabe abschließt und zu anderen Elementen auf der Seite wechselt, erkennt es, ob der Benutzername wiederholt wird. Bei der Beurteilung des Benutzernamens wird chkname.php mithilfe der Ajax-Technologie aufgerufen (der Benutzernamen-Verifizierungscode dieser Seite wird später veröffentlicht). Das Beurteilungsergebnis wird im div-Tag basierend auf dem Rückgabewert von chkname.php angezeigt.

$(&#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(); //检测是否激活注册按钮
 }
}

Nach dem Login kopieren

Überprüfen Sie das Passwort. Bei der Überprüfung des Passworts können Sie nicht nur die Länge des Passworts begrenzen, sondern auch die Stärke des Passworts beurteilen.

$(&#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();
}

Nach dem Login kopieren

Die zweite Passwortbeurteilung ist relativ einfach. Beurteilen Sie einfach, ob die zweite Passworteingabe mit der ersten Eingabe übereinstimmt.

$(&#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();
}

Nach dem Login kopieren

Die oben genannten Informationen müssen ausgefüllt werden. Wenn der Benutzer detailliertere Informationen eingeben möchte, kann er auf die Schaltfläche „Details“ klicken.

$(&#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;;
 }
}

Nach dem Login kopieren

Überprüfung des E-Mail-Formats , geben Sie die Zeichenfolge ein, die @ und . enthalten muss, und die Positionen dieser beiden Zeichenfolgen dürfen weder am Anfang noch am Ende stehen oder miteinander verbunden sein

$(&#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();

Nach dem Login kopieren

3 Benutzernamen erkennen (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;
?>

Nach dem Login kopieren

Viertens: Initialisierung der XMLHttpRequest-Funktion

// 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) {}
 }
}

Nach dem Login kopieren

Ausführlichere Erläuterungen zur Formularvalidierung basierend auf PHP + Ajax finden Sie auf der chinesischen PHP-Website!