简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  php教程  >  Explication détaillée de la validation de formulaire basée sur PHP Ajax

Explication détaillée de la validation de formulaire basée sur PHP Ajax

高洛峰
高洛峰original
2016-12-23 17:42:041733parcourir

Tout d'abord, utilisez la réponse au clavier pour vérifier si la saisie du formulaire est légale sans actualiser la page
Les utilisateurs déclenchent des événements de réponse via les événements onkeydown et onkeyup. La méthode d'utilisation est similaire à l'événement onclick. onkeydown signifie qu'il est déclenché lorsqu'une touche du clavier est enfoncée, et onkeyup est exactement le contraire, se déclenchant lorsqu'une touche du clavier est enfoncée puis levée.
Deux méthodes d'appel courantes :
(1) Ajouter l'événement à l'élément de page Lorsque l'utilisateur a terminé de saisir les informations et clique sur n'importe quelle touche, l'événement onkeydown est déclenché et la fonction refer() est appelée.
Cette méthode est la plus simple et la plus directe, avec le format suivant : 

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

(2) Chargement via window.onload, lorsque la page est chargée, l'événement est chargé. Lorsque l'utilisateur saisit des informations, cet événement sera déclenché à chaque fois qu'une lettre est saisie. Dans la fonction appelée par l'événement, les informations saisies par l'utilisateur sont jugées. 

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

L'utilisation de l'événement onkeydown peut également contrôler des touches spécifiques, notamment la touche 604dcb765a48d8d44d65da3c957a4ba5 (event.keyCode==13), la barre d'espace (event.keyCode==32), ca92b3c4521180d6a70d03d3dfb34279 ;, touche cfb97f17c481891d4a21525de725c898, etc. Ceci est réalisé en utilisant l'attribut keyCode dans l'événement onkeydown. La propriété KeyCode sait sur quelle touche l'utilisateur a appuyé.

Deuxièmement, vérification des informations d'enregistrement
Fonction universelle, renvoie l'objet d'élément d'identification déclenché 

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

analyse de la fonction function()
Concentrez-vous d'abord sur la zone de texte du nom d'utilisateur pour ; faciliter le fonctionnement de l'utilisateur. Ensuite, 5 variables sont déclarées, qui représentent les résultats des 5 données à détecter. Lorsque les données du test sont qualifiées, définissez la valeur de la variable sur "oui". 

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

Le nom d'utilisateur est vérifié ci-dessous Lorsque l'utilisateur entre le nom d'enregistrement, cette fonction effectuera une régularisation à chaque entrée du. utilisateur. Jugez et définissez différentes valeurs cname1 en fonction des résultats. 

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

Lorsque la zone de texte du nom d'utilisateur perd le focus, c'est-à-dire lorsque l'utilisateur termine sa saisie et passe à d'autres éléments de la page, il détectera si le nom d'utilisateur est répété. Le jugement du nom d'utilisateur utilise la technologie Ajax pour appeler chkname.php (le code de vérification du nom d'utilisateur de cette page sera publié ultérieurement) et le résultat du jugement est affiché dans la balise div en fonction de la valeur de retour de chkname.php. 

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

Vérifiez le mot de passe. Lors de la vérification du mot de passe, en plus de limiter la longueur du mot de passe, vous pouvez également juger de la force du mot de passe. 

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

Le jugement du deuxième mot de passe est relativement simple, il suffit de juger si la deuxième saisie du mot de passe est égale à la première saisie. 

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

Les informations ci-dessus doivent être renseignées. Si l'utilisateur souhaite renseigner des informations plus détaillées, il peut cliquer sur le "Bouton Détails" 

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

Vérification du format de l'e-mail , entrez la chaîne qui doit contenir @ et ., et les positions de ces deux chaînes ne peuvent pas être au début ou à la fin ni connectées ensemble 

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

Détecter le nom d'utilisateur (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;
?>

Quatre, initialisation de la fonction 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) {}
 }
}


Pour des explications plus détaillées sur la validation de formulaire basée sur PHP Ajax, veuillez faire attention au site Web PHP chinois !

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：fonction de vérification en temps réel de l'enregistrement php ajaxArticle suivant：fonction de vérification en temps réel de l'enregistrement php ajax

Articles Liés

Voir plus