Implementierung der Überprüfung der Formularübermittlung basierend auf jQuery

Heim

Web-Frontend

js-Tutorial

Implementierung der Überprüfung der Formularübermittlung basierend auf jQuery_jquery

May 16, 2016 pm 04:30 PM

jquery 表单提交验证

HTML-Formularcode:

Code kopieren Der Code lautet wie folgt:

<form method="post" action="">
                                                                                             
                <label for="username">Benutzername: </label>
              <input type="text" id="username" class="required"/>
                                                                                 
                                           <label for="username">E-Mail: </label>
               <input type="text" id="email" class="required"/>
                                                                                 
                                <label for="username">Profil: </label>
                                     <input type="text" id="personinfo"/>
                                                                                 
                 <input type="submit" value="submit" id="send"/>
                                     <input type="reset" id="res"/>
                                                                                 
</form>

jQuery-Code: 

Code kopieren

 Der Code lautet wie folgt:

             $(function(){ 

               $("form :input.required").each(function(){ 

              var $required = $("<strong class='high'>*</strong>");
//$(this).parent().append($required); //An das Dokument anhängen 

                      $(this).parent().prepend($required);
              }); 

                 $('form :input').blur(function(){ 

              var $parent = $(this).parent();
If($(this).is('#username')){ 

If(this.value==""||this.value.length<6){ 

                                                                                                                                         var errorMsg = 'Bitte geben Sie einen Benutzernamen mit mindestens 6 Zeichen ein' 

                                   $parent.append('<span class="formtips onError">' errorMsg '</span>');
                           }else{ 

                                                                                                                                                                                                                                              var okMsg = 'Korrekte Eingabe';
$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 = 'Bitte geben Sie die richtige E-Mail-Adresse ein';
$parent.append('<span class="formtips onError">' errorMsg '</span>');
                                                                                                                                                                  
Var okmsg = 'korrekte Eingabe';
                                    $parent.append('<span class="formtips onSuccess">' okMsg '</span>');
                                                                                                                                                                   
              }); 

                $("form :input").focus(function(){ 

              var $parent = $(this).parent();
                       $parent.find(".formtips").remove();
              }); 

                  $("#send").click(function(){ 

              var $parent = $(this).parent().parent();
                    $parent.find(".formtips").remove();                      $("form .required:input").trigger('blur');
              var numError = $('form .onError').length;
If(numError){ 

                         return false; 

              }); 

                 $("#res").click(function(){ 

              var $parent = $(this).parent().parent();
                       $parent.find(".formtips").remove();
              }); 

});

Der Code ist sehr einfach und leicht zu verstehen, Freunde, nehmen Sie ihn einfach und verwenden Sie ihn. Ich werde ihn hier nicht im Detail erklären.

Erklärung dieser Website

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