Comment utiliser JavaScript pour la validation de formulaire

1. Validité des données et vérification de la sécurité. 3 niveaux de vérification.

• 1. Vérification du script js du client

• 2. Vérification de la langue du serveur java-servlet

• 3. Contraintes de la base de données

2. Événement de soumission du formulaire lors de la soumission. L'événement correspondant de l'élément de formulaire est déclenché en cliquant sur le bouton Soumettre. (type="submit")

• onsubmit recevra une valeur de retour vraie ou fausse.

• renvoie vrai pour soumettre le formulaire actuel,

• renvoie faux et ne soumet pas le formulaire

3. Objet chaîne.

• Méthodes d'objets chaîne : string object.Method name();

• Méthodes courantes :
  toLowerCase( ) Convert la chaîne en minuscule
  toUpperCase() Convertit la chaîne en majuscule
  charAt(index) Renvoie le caractère à la position spécifiée
  indexOf(string, index) Trouve le premier caractère d'une chaîne spécifiée Position d'apparition
  substring(zindex1.index2) Renvoie la chaîne située entre l'index spécifié index1 et index2, et inclut les caractères correspondant à l'index index1, à l'exclusion des caractères correspondant à l'index index2

• Vérification du format de l'e-mail :

• 1. Utilisez getElementById() pour obtenir la valeur de Email
  Utilisez la méthode de chaîne indexOf() pour déterminer si la valeur de Email est Contient. Symboles "@" et "."
  Décidez si vous souhaitez soumettre le formulaire selon que la valeur de retour de la fonction est vraie ou fausse

  var mail=document.getElementById("email").value;
  if(mail.indexOf("@")==-1){
    alert("Email格式不正确\n必须包含@");
     return false;   
  }

• Utilisez l'attribut length de l'objet String pour vérifier la longueur de. le mot de passe

  var pwd=document.getElementById("pwd").value;
  if(pwd.length<6){
        alert("密码必须等于或大于6个字符");
        return false; 
  }

• 3. Vérifiez si le mot de passe saisi deux fois est cohérent

  var repwd=document.getElementById("repwd").value;
  if(pwd!=repwd){
       alert("两次输入的密码不一致");
       return false;   
  }

• 4. la longueur du texte et utilisez la méthode for loop et substring() en séquence Tronquez un seul caractère et déterminez si chaque caractère est un nombre

  var user=document.getElementById("user").value;
      for(var i=0;i<user.length;i++){
      var j=user.substring(i,i+1)
      if(isNaN(j)==false){
         alert("姓名中不能包含数字");
         return false;   
      }
  }

5, propriétés, méthodes et événements de l'objet zone de texte

• Événement :
  onblur perd le focus et se déclenche lorsque le curseur quitte une zone de texte
  onfocus obtient le focus et se déclenche lorsque le curseur entre dans une zone de texte
  onkeypress Une touche du clavier est enfoncée et relâchée

• Méthode :
  blur() Supprime le focus du champ de texte
  focus() Définit le focus dans le champ de texte ,C'est - à - dire récupérez le curseur de la souris
  select() Sélectionnez le contenu dans le champ de texte

• Attributs :

  1. Effacez le contenu initial dans la zone de texte et définissez le. bordure en rouge :

  function clearText(){
      var mail=document.getElementById("email");
      if(mail.value=="请输入正确的电子邮箱"){
      mail.value="";
      mail.style.borderColor="#ff0000";
      }
  }
  ……
      <td>Email：<input id="email" type="text"  class="inputs" value="请输入正确的电子邮箱" onfocus="clearText()"/></td>
    </tr>

  2. Lorsque l'utilisateur saisit une adresse e-mail invalide, le contenu de la zone de texte E-mail sera automatiquement sélectionné et mis en surbrillance, invitant l'utilisateur à saisir à nouveau

  if(mail.indexOf("@")==-1 || mail.indexOf(".")==-1){
      alert("Email格式不正确\n必须包含符号@和.");
      document.getElementById("email").select();
      return false;
  }

  3. Inviter à indiquer que l'e-mail ne peut pas être vide

  function checkEmail(){
      var mail= document.getElementById ("email");
      var pID= document.getElementById ("pEmail");
      pID.innerHTML="";
      if(mail.value==""){
           pID.innerHTML="Email不能为空";
           return false;
      }
  }
  ……
  <input id="email" type="text" class="inputs"  onblur="checkEmail()"/>
  <p class="red" id="pEmail"></p>

• id Définir ou renvoyer l'identifiant du champ de texte

• value Définir ou renvoyer le texte La valeur de l'attribut value du domaine

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!