Heim > Artikel > Web-Frontend > jquery implementiert die einfache Form validation_jquery

jquery implementiert die einfache Form validation_jquery

WBOYOriginal: 2016-05-16 15:31:47861Durchsuche

Wie Sie eine einfache Formularvalidierung in JQuery implementieren, lassen Sie uns zunächst die Implementierungsideen mit Ihnen teilen.

Allgemeine Idee:
Fügen Sie zunächst für jedes erforderliche Tag erforderliche Tags hinzu und implementieren Sie es mithilfe der Methode each().
Erstellen Sie in der Methode every() zunächst ein Element mit , und fügen Sie dann das erstellte Element über die Methode append() . Das
dies ist hier sehr wichtig. Jedes Mal entspricht dies dem entsprechenden Eingabeelement, und dann wird das entsprechende übergeordnete Element abgerufen. Fügen Sie dann ein Ereignis mit verlorenem Fokus für das Element
Eingabe hinzu. Überprüfen Sie dann den Benutzernamen und die E-Mail-Adresse. Hier wird ein
zur Beurteilung von is() verwendet. Wenn ein Benutzername ist, führen Sie die entsprechende Verarbeitung durch. Im jQuery-Framework können Sie auch Original-Javascript-Code entsprechend einstreuen. Beispielsweise enthält der Verifizierungsbenutzername
this.value und this.value.length. Beurteilen Sie den Inhalt. Anschließend erfolgte die Verifizierung der E-Mail mit Hilfe des
regulären Ausdrucks. Fügen Sie dann
Keyup-Ereignis und Fokusereignis zum Eingabeelement hinzu. Auch während des Keyup müssen Sie dies überprüfen, indem Sie das Unschärfeereignis aufrufen . . Verwenden Sie den Trigger triggerHandler(), um das entsprechende Ereignis auszulösen. Führen Sie beim Absenden des Formulars am Ende eine einheitliche Überprüfung durch und kümmern Sie sich um die Gesamt- und Detailbearbeitung.
Fügen Sie bei Bedarf die
rote Sternmarkierung hinzu.

jQuery-Teil:

<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>

HTML-Teil:

<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>

Das Obige ist der Schlüsselcode für JQuery zur Implementierung einer einfachen Formularvalidierung. Ich hoffe, dass er für das Lernen aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiele für JS-gekapselte Cookie-Betriebsfunktionen (Festlegen, Lesen, Löschen)_Javascript-KenntnisseNächster Artikel：Beispiele für JS-gekapselte Cookie-Betriebsfunktionen (Festlegen, Lesen, Löschen)_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen