recherche

Maison >interface Web >js tutoriel >Un formulaire qui vérifie instantanément si le format est correct en fonction de jquery_jquery

Un formulaire qui vérifie instantanément si le format est correct en fonction de jquery_jquery

WBOY
WBOYoriginal
2016-05-16 15:01:561887parcourir

De nos jours, les modules d'inscription de nombreux sites Web peuvent vérifier instantanément si le format est correct, ce qui améliore considérablement l'expérience utilisateur et est très bénéfique pour le développement.

Le code suivant utilise jquery pour implémenter une inspection instantanée d'un format de champ de formulaire (y compris la longueur du champ, le format de l'e-mail), et en même temps, lors de la soumission, l'événement de vérification se déclenche à nouveau.

Notez que cette vérification est principalement basée sur le keyup et la mise au point. Ces deux événements sont utilisés pour déclencher l'événement de flou (perte de mise au point). 

<html>
<head>
 <meta charset="utf-8" />
 <title></title>
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 <script src="jquery-1.3.2.min.js"></script>
 <script>
  $(function () {
　　　　　　　　//为每个必填字段后面加上*
   $("form :input.required").each(function () {
    var $required = $("<strong class='high'>*</strong>");
    $(this).parent().append($required);
   });
　　　　　　　　//textbox失去焦点事件
   $("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");//keyup和focus利用triggerHandler来触发blur事件
   }).focus(function () {
    $(this).triggerHandler("blur");
   });
   $("#send").click(function () {//提交按钮事件
    $("form .required:input").trigger('blur');
    var numError = $('form .onError').length;
    if(numError)
    {
     return false;
    }
    alert("注册成功，密码已发到你的邮箱，请查收");
   });
  });

 </script>
</head>
<body>
 <form method="post" action="">
  <div class="int">
   <label for="username">用户名</label>
   <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>
</html>

Cliquez pour plus de contenu : Encyclopédie de validation de formulaire Jquery

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde dans l'apprentissage de la programmation jquery.

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：Le processus d'implémentation de la fenêtre dans le plug-in personnalisé jquery development_jqueryArticle suivant：Le processus d'implémentation de la fenêtre dans le plug-in personnalisé jquery development_jquery

Articles Liés

Voir plus