表单验证不使用插件-问题

Form Validation Without using Plugin - Problem

本文关键字：插件 问题 验证 表单      更新时间：2023-09-26

我真的不想使用插件来验证我的表单，但由于某种原因它不工作:

我的JS是:

function postregform() {
 var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;   
  var name = $('#name').val();var email = $('#email').val();var text = $('#textarea').val(); var text2 = $('#textarea2').val();var tooln = $('#tools').val();
if (name.value=='') { 
   $('#error-container').delay.(200).animate({'top' : '4px'}, 400)
      $('#error-container').delay(3700).animate({'top' : '-70px'}, 400);
   return false; 
  }
if (email.value=='') { 
    $('#error-container2').delay(200).animate({'top' : '4px'}, 400);
      $('#error-container2').delay(3700).animate({'top' : '-70px'}, 400);           
    return false;
     }
   if (! emailPattern.test(email.value)) { 
   $('#error-container3').delay(200).animate({'top' : '4px'}, 400);
      $('#error-container3').delay(3700).animate({'top' : '-70px'}, 400);                    
     return false;                   
   }
       if (text.value=='') { 
         $('#error-container4')delay(200).animate({'top' : '4px'}, 400);
      $('#error-container4').delay(3700).animate({'top' : '-70px'}, 400);           
    return false;
                           }
        if (text.value.length < 10) { 
         $('#error-container5').animate({'top' : '4px'}, 400);
      $('#error-container5').delay(3700).animate({'top' : '-70px'}, 400);           
    return false;
                          }
       if (text2.value.length < 10) { 
         $('#error-container6').delay(200).animate({'top' : '4px'}, 400);
      $('#error-container6').delay(3700).animate({'top' : '-70px'}, 400);           
    return false;
                           }
       if (tooln.value.length < 10) { 
         $('#error-container7').delay(200).animate({'top' : '4px'}, 400);
      $('#error-container7').delay(3700).animate({'top' : '-70px'}, 400);           
    return false;
    }
}

我的HTML表单:

<div id="bug_form">
<form method="post" action="http://forms.yola.com/formservice/en_US/8a4986cb2437dfa701243c302c29582d/8a4986ca315350c601315d9a956b19db/8a4986ca315350c601315d9a95b919dc/I35/" onSubmit="return postregform();"> 
  <label for="yola_form_widget_I35_0"><span style="color:red;">*</span> Name</label>  <br>
                                    <input id="yola_form_widget_I35_0" class="text" id="name" name="name" type="text" value=""> 
                        <!--name="0&lt;text&gt;"-->
                <input type="hidden" name="0&lt;label&gt;" value="Name"> 
                    <br><br>
                                                          <label for="yola_form_widget_I35_1"><span style="color:red;">*</span> Email</label>  <br>
                                    <input id="yola_form_widget_I35_1" class="text" id="email" name="email" type="text" value=""> 
                <input type="hidden" name="1&lt;label&gt;" value="Email"> 
                    <br><br>
                                                      <label for="yola_form_widget_I35_2"><span style="color:red;">*</span> Tool with Bug</label>  
                        <br>                    
                                    <select id="yola_form_widget_I35_2" name="2&lt;list&gt;"> 
                                                    <option value="Script Encode">Script Encoder</option> 
                                                    <option value="Color Picker">Color Picker</option> 
                                                    <option value="Linear">Linear</option> 
                                                    <option value="Text Properties">Text Properties</option> 
                                                    <option value="Box Properties">Box Properties</option> 
                                                    <option value="Transform Properties">Transform Properties</option> 
                                                    <option value="Position Changer">Position Changer</option> 
                                                    <option value="Code Previewer">Code Previewer</option> 
                                            </select> 
                <input type="hidden" name="2&lt;label&gt;" value="Tool with Bug"> 
                    <br><br>
                                                          <label for="yola_form_widget_I35_3"><span style="color:red;">*</span> Bug Description</label><br>  
                                    <textarea id="yola_form_widget_I35_3" cols="18" rows="8" id="textarea" name="textarea"></textarea> 
                <input type="hidden" name="3&lt;label&gt;" value="Bug Description"> 

            <input type="hidden" name="redirect" value="?formI35Posted=true"> 
            <input type="hidden" name="redirect_fail" value="?formI35PostFailed=true"> 
            <input type="hidden" name="form_name" value="Report Bug"> 
            <input type="hidden" name="site_name" value="YolaTools"> 
                        <input type="hidden" name="destination" value="49FVJQi6Aiw6w5NTMAH7HuUGK-JH4UzV6JUV6gTwCHYgMQ==:d19AMmhdrSbCjBPC3ewkoW7pAqRJ0REkf9OJAJQrqlM="> 
                            <p><input class="submit" type="submit" value="Submit" onSubmit="return postregform();"></p> 

    </form>
  <span style="cursor:pointer;" onclick="bugg_out();">Close[X]</span>
</div>
<div id="request">
    <form method="post" action="http://forms.yola.com/formservice/en_US/8a4986cb2437dfa701243c302c29582d/8a4986ca315350c601315d9a956b19db/8a4986ca315350c601315d9a95b919dc/I39/" onSubmit="return postregform(this);"> 

                                                       <label for="yola_form_widget_I39_0"><span style="color:red;">*</span> Name</label> <br>
                                    <input id="yola_form_widget_I39_0" class="text" name="name" type="text" value=""> 
                <input type="hidden" name="0&lt;label&gt;" value="Name"> 
        <br><br>
                    <label for="yola_form_widget_I39_1"><span style="color:red;">*</span> Email</label>
               <br>                             
                                    <input id="yola_form_widget_I39_1" class="text" name="email" type="text" value=""> 
                <input type="hidden" name="1&lt;label&gt;" value="Email"> 

<br>                <br>   
      <label for="yola_form_widget_I39_2"><span style="color:red;">*</span> Tool Name</label>
                   <br>                 <input id="yola_form_widget_I39_2" class="text" id="tools" name="tooln" type="text" value=""> 
                <input type="hidden" name="2&lt;label&gt;" value="Tool Name"> 
                    <br><br>
                                                          <label for="yola_form_widget_I39_3"><span style="color:red;">*</span> Tool Description</label>  
                                            <br>
                                    <textarea id="yola_form_widget_I39_3" cols="18" rows="8" id="textarea2" name="textarea1"></textarea> 
                <input type="hidden" name="3&lt;label&gt;" value="Tool Description"> 

            <input type="hidden" name="redirect" value="?formI39Posted=true"> 
            <input type="hidden" name="redirect_fail" value="?formI39PostFailed=true"> 
            <input type="hidden" name="form_name" value=""> 
            <input type="hidden" name="site_name" value="YolaTools"> 
                        <input type="hidden" name="destination" value="rcUO3XKWbMU_mNgysHPcPO_RNeKhSrMC9HNguOCTusNvKg==:d19AMmhdrSbCjBPC3ewkoW7pAqRJ0REkf9OJAJQrqlM="> 
                            <p><input class="submit" type="submit" value="Submit"></p> 

    </form> 
  <span style="cursor:pointer;text-align:center;" onclick="reque_out();">Close[X]</span>
</div>

和错误:

<!-- Start Errors -->
<div id="error-container">  
 <div class="error-box"> 
   <span id="forgot" style="color:red;font-weight:bold;">Name is Required</span> 
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div> 
</div></div> 
<div id="error-container2">  
 <div class="error-box"> 
   <span id="forgot" style="color:red;font-weight:bold;">Email is Required</span> 
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div> 
</div></div> 
<div id="error-container3">  
 <div class="error-box"> 
   <span id="forgot" style="color:red;font-weight:bold;">Invalid Email</span> 
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div> 
</div></div> 
<div id="error-container4">  
 <div class="error-box"> 
   <span id="forgot" style="color:red;font-weight:bold;">Bug Description is Required</span> 
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div> 
</div></div> 
<div id="error-container5">  
 <div class="error-box"> 
   <span id="forgot" style="color:red;font-weight:bold;">Min. Lenght for Bug Description is 10</span> 
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div> 
</div></div> 
<div id="error-container6">  
 <div class="error-box"> 
   <span id="forgot" style="color:red;font-weight:bold;">Min. Lenght for Tool Description is 10</span> 
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div> 
</div></div> 
<div id="error-container7">  
 <div class="error-box"> 
   <span id="forgot" style="color:red;font-weight:bold;">Tool Name is Required</span> 
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div> 
</div></div> 
<!-- End Error -->

不要忘记CSS:

 .top_bottom{
    color:white;
   background: #2580bc; /* Old browsers */
background: -moz-linear-gradient(top, #2580bc 0%, #2989d8 50%, #218fd3 52%, #2b94e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2580bc), color-stop(50%,#2989d8), color-stop(52%,#218fd3), color-stop(100%,#2b94e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2580bc', endColorstr='#2b94e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* W3C */ 
    padding:15px;border-radius:9px;-webkit-border-radius:9px;-moz-border-radius:9px;-o-border-radius:9px;
  }
  .top_bottom:hover{
    color:white;
    background: #2580bc; /* Old browsers */
background: -moz-linear-gradient(top, #2580bc 0%, #0084d1 53%, #0678d6 55%, #2b94e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2580bc), color-stop(53%,#0084d1), color-stop(55%,#0678d6), color-stop(100%,#2b94e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2580bc 0%,#0084d1 53%,#0678d6 55%,#2b94e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2580bc 0%,#0084d1 53%,#0678d6 55%,#2b94e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #2580bc 0%,#0084d1 53%,#0678d6 55%,#2b94e5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2580bc', endColorstr='#2b94e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #2580bc 0%,#0084d1 53%,#0678d6 55%,#2b94e5 100%); /* W3C */ 
    padding:15px;border-radius:9px;-webkit-border-radius:9px;-moz-border-radius:9px;-o-border-radius:9px;
  }
  .top_bottom:active{
    color:white;
   background: #2580bc; /* Old browsers */
background: -moz-linear-gradient(top, #2580bc 0%, #2989d8 50%, #218fd3 52%, #2b94e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2580bc), color-stop(50%,#2989d8), color-stop(52%,#218fd3), color-stop(100%,#2b94e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2580bc', endColorstr='#2b94e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* W3C */ 
    padding:15px;border-radius:9px;-webkit-border-radius:9px;-moz-border-radius:9px;-o-border-radius:9px;
  }
   #bug_form, #request {
    position:absolute;
    font-size:15px; 
    top:-530px;
    right:463px; 
    border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
-webkit-border-bottom-left-radius:20px;
-o-border-bottom-left-radius:20px;
   border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
-webkit-border-bottom-right-radius:20px;
-o-border-bottom-right-radius:20px;
    padding:10px;
    z-index:900;color:black;
     background: #2580bc; /* Old browsers */
background: -moz-linear-gradient(top, #2580bc 0%, #2989d8 50%, #218fd3 52%, #2b94e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2580bc), color-stop(50%,#2989d8), color-stop(52%,#218fd3), color-stop(100%,#2b94e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2580bc', endColorstr='#2b94e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* W3C */ 
    padding:15px;
  }
    #error-container, #error-container2, #error-container3,  #error-container4, #error-container5, #error-container6, #error-container7 {position:fixed;top:-70px;right:36px;}
  .error-box {background-color:#FFDBE0;border:2px solid red;font-size:13px;line-height:1.3em;margin:10px auto;padding:10px;position:relative;text-align:center;width:270px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-box-shadow:0 0 5px #888888;-webkit-box-shadow:0 0 5px #888888;box-shadow:0 0 5px #88888;}
  .chat-bubble-arrow-border {border-color:transparent  transparent red transparent;border-style: solid;border-width: 10px;height:0;width:0;position:absolute;top:-21px;right:30px;z-index:1;}
.chat-bubble-arrow {border-color:transparent  transparent #FFDBE0 transparent;border-style: solid;border-width: 10px;height:0;width:0;position:absolute;top:-19px;right:30px;z-index:5;}

这段代码可能看起来有点疯狂，但我只是不喜欢使用验证插件。请帮助

不使用插件的最简单的验证方法是编写一些验证正则表达式函数，如果所有条件都通过了，让过程继续…请参考下面的链接:我只是从这个站点复制了代码并发布在这里，只需访问该链接并自定义您的验证样式。网站:

$(function() {
    // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
    var name = $( "#name" ),
        email = $( "#email" ),
        password = $( "#password" ),
        allFields = $( [] ).add( name ).add( email ).add( password ),
        tips = $( ".validateTips" );
    function updateTips( t ) {
        tips
            .text( t )
            .addClass( "ui-state-highlight" );
        setTimeout(function() {
            tips.removeClass( "ui-state-highlight", 1500 );
        }, 500 );
    }
    function checkLength( o, n, min, max ) {
        if ( o.val().length > max || o.val().length < min ) {
            o.addClass( "ui-state-error" );
            updateTips( "Length of " + n + " must be between " +
                min + " and " + max + "." );
            return false;
        } else {
            return true;
        }
    }
    function checkRegexp( o, regexp, n ) {
        if ( !( regexp.test( o.val() ) ) ) {
            o.addClass( "ui-state-error" );
            updateTips( n );
            return false;
        } else {
            return true;
        }
    }
    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Create an account": function() {
                var bValid = true;
                allFields.removeClass( "ui-state-error" );
                bValid = bValid && checkLength( name, "username", 3, 16 );
                bValid = bValid && checkLength( email, "email", 6, 80 );
                bValid = bValid && checkLength( password, "password", 5, 16 );
                bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
                // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                bValid = bValid && checkRegexp( email, /^((([a-z]|'d|[!#'$%&''*'+'-'/='?'^_`{'|}~]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])+('.([a-z]|'d|[!#'$%&''*'+'-'/='?'^_`{'|}~]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])+)*)|(('x22)(((('x20|'x09)*('x0d'x0a))?('x20|'x09)+)?((['x01-'x08'x0b'x0c'x0e-'x1f'x7f]|'x21|['x23-'x5b]|['x5d-'x7e]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(''(['x01-'x09'x0b'x0c'x0d-'x7f]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF]))))*((('x20|'x09)*('x0d'x0a))?('x20|'x09)+)?('x22)))@((([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])*([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])))'.)+(([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])*([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])))'.?$/i, "eg. ui@jquery.com" );
                bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
                if ( bValid ) {
                    $( "#users tbody" ).append( "<tr>" +
                        "<td>" + name.val() + "</td>" + 
                        "<td>" + email.val() + "</td>" + 
                        "<td>" + password.val() + "</td>" +
                    "</tr>" ); 
                    $( this ).dialog( "close" );
                }
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });
    $( "#create-user" )
        .button()
        .click(function() {
            $( "#dialog-form" ).dialog( "open" );
        });
});
相关文章：