基于jQuery实现表单提交验证

2020-05-22 17:04:13易采站长站整理

html表单代码:

   <form method=”post” action=””>
       <div class=”int”>
          <label for=”username”>用户名:</label>
          <input type=”text” id=”username” class=”required”/>
       </div>
       <div class=”int”>
           <label for=”username”>邮箱:</label>
           <input type=”text” id=”email” class=”required”/>
       </div>
       <div class=”int”>
           <label for=”username”>个人资料:</label>
           <input type=”text” id=”personinfo”/>
       </div>
       <div class=”sub”>
           <input type=”submit” value=”提交” id=”send”/>
           <input type=”reset” id=”res”/>
       </div>
   </form> 

jQuery代码:

          $(function(){
            $(“form :input.required”).each(function(){
                var $required = $(“<strong class=’high’>*</strong>”);
                //$(this).parent().append($required);  //追加到文档中
                $(this).parent().prepend($required);
            });
            $(‘form :input’).blur(function(){
                var $parent = $(this).parent();
                if($(this).is(‘#username’)){
                   if(this.value==””||this.value.length<6){