前端开发

 首页 > 前端开发 > jquery教程 > 基于jQuery实现表单提交验证_jquery_自学php网

基于jQuery实现表单提交验证_jquery_自学php网

分享到:
【字体:
导读:
          本文给大家分享的是一段基于jQuery的实现简单的表单提交验证的代码,非常简单实用,推荐给有相同需求的小伙伴们参考下。...

html表单代码:

复制代码 代码如下:

  

      

         
         
      

      

          
          
      

      

          
          
      

      

          
          
      

  
 

jQuery代码:

复制代码 代码如下:

          $(function(){
            $("form :input.required").each(function(){
                var $required = $("*");
                //$(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){
                      var errorMsg = '请输入至少6位的用户名';
                      $parent.append(''+errorMsg+'');
                   }else{
                       var okMsg = '输入正确';
                       $parent.append(''+okMsg+'');
                   }
                }
                if($(this).is('#email')){
                    if(this.value==""||(this.value!=""&&!/.+@.+.[a-zA-Z]{2,4}$/.test(this.value))){
                        var errorMsg = '请输入正确的E-mail地址';
                        $parent.append(''+errorMsg+'');
                    }else{
                        var okMsg = '输入正确';
                        $parent.append(''+okMsg+'');
                    }
                }
            });
            $("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();
            });
        });

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

分享到:
jQuery简单实现网页选项卡特效_jquery_自...
CSS: 复制代码 代码如下:         .clear{clear:both; height:0px; overflow:hidden;}         .tab{width:400px; font-size:12px;}         .tab_menu ul{padding:0px;margin:0px;}         .tab_menu li{list-style:none; display:block; float:left;            ...
基于jQuery实现下拉框_jquery_自学php网
项目中经常会遇到下拉框,在扁平化和响应式布局大行其道的今天,使用jQuery来实现下拉框就十分的必要了,而且也会美观很多,这里就给大家推荐一段基于jQuery的下拉框代码。 jQuery代码: 复制代码 代码如下:         $(function(){             $(&#039;#add&#039;).click(function(){    ...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……