Maison >interface Web >js tutoriel >jquery implémente un formulaire simple validation_jquery

jquery implémente un formulaire simple validation_jquery

WBOYoriginal: 2016-05-16 15:31:47919parcourir

Comment implémenter une validation de formulaire simple dans jquery, partageons d'abord avec vous les idées d'implémentation.

Idée générale :
Ajoutez d'abord les balises requises pour chaque élément requis, en utilisant la méthode each() pour l'implémenter.
Dans la méthode each(), créez d'abord un élément avec , , puis ajoutez l'élément créé à l'arrière de l'élément parent via la méthode append() .
Le this ici est très essentiel. A chaque fois cela correspond à l'élément d'entrée correspondant, puis l'élément parent correspondant est obtenu.
Ajoutez ensuite un événement de focus perdu pour l'élément input. Vérifiez ensuite le nom d'utilisateur et l'adresse e-mail.
Ici, un est utilisé pour juger is() Si est un nom d'utilisateur, effectuez le traitement correspondant. S'il s'agit d'un email, effectuez la vérification correspondante.
Dans le framework jQuery, vous pouvez également intercaler de manière appropriée le code javascript original. Par exemple, le nom d'utilisateur de vérification contient this.value et this.value.length. Jugez le contenu.
Ensuite la vérification de l'email a été effectuée, à l'aide de l'expression régulière.
Ajoutez ensuite l'événement keyup et l'événement focus à l'élément d'entrée Même pendant le keyup, vous devez le vérifier en appelant l'événement flou. . Utilisez le déclencheur triggerHandler() pour déclencher l'événement correspondant.
Lors de la soumission du formulaire à la fin, effectuez une vérification unifiée et gérez le traitement global et détaillé.
Si cela est nécessaire, ajoutez marque étoile rouge.

Partie jQuery :

<script type="text/javascript">
//<![CDATA[
$(function(){  
  $("form :input.required").each(function(){
   var $required = $("<strong class='high'> *</strong>"); //创建元素
   $(this).parent().append($required); //然后将它追加到文档中
  });
   //文本框失去焦点后
  $('form :input').blur(function(){
    var $parent = $(this).parent();
    $parent.find(".formtips").remove();
    //验证用户名
    if( $(this).is('#username') ){
     if( this.value=="" || this.value.length < 6 ){
      var errorMsg = '请输入至少6位的用户名.';
      $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
     }else{
      var okMsg = '输入正确.';
      $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
     }
    }
    //验证邮件
    if( $(this).is('#email') ){
    if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
      var errorMsg = '请输入正确的E-Mail地址.';
      $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
    }else{
      var okMsg = '输入正确.';
      $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
    }
    }
  }).keyup(function(){
   $(this).triggerHandler("blur");
  }).focus(function(){
    $(this).triggerHandler("blur");
  });//end blur

  
  //提交，最终验证。
   $('#send').click(function(){
    $("form :input.required").trigger('blur');
    var numError = $('form .onError').length;
    if(numError){
     return false;
    } 
    alert("注册成功,密码已发到你的邮箱,请查收.");
   });

  //重置
   $('#res').click(function(){
    $(".formtips").remove(); 
   });
})
//]]>
</script>

partie html :

<body>

<form method="post" action="">
 <div class="int">
  <label for="username">用户名:</label>
  <!-- 为每个需要的元素添加required -->
  <input type="text" id="username" class="required" />
 </div>
 <div class="int">
  <label for="email">邮箱:</label>
  <input type="text" id="email" class="required" />
 </div>
 <div class="int">
  <label for="personinfo">个人资料:</label>
  <input type="text" id="personinfo" />
 </div>
 <div class="sub">
  <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
 </div>
</form>

</body>

Ce qui précède est le code clé permettant à jquery d'implémenter une validation de formulaire simple. J'espère que cela sera utile à l'apprentissage de chacun.

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：Exemples de fonctions d'opération de cookies encapsulés JS (paramétrage, lecture, suppression)_compétences javascriptArticle suivant：Exemples de fonctions d'opération de cookies encapsulés JS (paramétrage, lecture, suppression)_compétences javascript

Articles Liés

Voir plus