提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

基于jQuery实现表单提交验证

jQuery 实现 基于 验证 提交 表单
2023-06-13 09:15:31 时间

html表单代码：

复制代码代码如下:

  <formmethod="post"action="">
      <divclass="int">
         <labelfor="username">用户名：</label>
         <inputtype="text"id="username"class="required"/>
      </div>
      <divclass="int">
          <labelfor="username">邮箱：</label>
          <inputtype="text"id="email"class="required"/>
      </div>
      <divclass="int">
          <labelfor="username">个人资料：</label>
          <inputtype="text"id="personinfo"/>
      </div>
      <divclass="sub">
          <inputtype="submit"value="提交"id="send"/>
          <inputtype="reset"id="res"/>
      </div>
  </form> 

jQuery代码：

复制代码代码如下:

         $(function(){
           $("form:input.required").each(function(){
               var$required=$("<strongclass="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){
                     varerrorMsg="请输入至少6位的用户名";
                     $parent.append("<spanclass="formtipsonError">"+errorMsg+"</span>");
                  }else{
                      varokMsg="输入正确";
                      $parent.append("<spanclass="formtipsonSuccess">"+okMsg+"</span>");
                  }
               }
               if($(this).is("#email")){
                   if(this.value==""||(this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
                       varerrorMsg="请输入正确的E-mail地址";
                       $parent.append("<spanclass="formtipsonError">"+errorMsg+"</span>");
                   }else{
                       varokMsg="输入正确";
                       $parent.append("<spanclass="formtipsonSuccess">"+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");
              varnumError=$("form.onError").length;
              if(numError){
                 returnfalse;
              }
           });
           $("#res").click(function(){
               var$parent=$(this).parent().parent();
               $parent.find(".formtips").remove();
           });
       });

代码很简单，也很易懂，小伙伴们直接拿走用吧，这里就不详细说明了。

相关文章