新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

复制代码 代码如下

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){
                      var errorMsg = '请输入至少6位的用户名';
                      $parent.append('<span class="formtips onError">' errorMsg '</span>');
                   }else{
                       var okMsg = '输入精确';
                       $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 = '请输入精确的E-mail地址';
                        $parent.append('<span class="formtips onError">' errorMsg '</span>');
                    }else{
                        var okMsg = '输入准确';
                        $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();
            });
        });

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

您也许感兴趣的篇章:

  • Jquery插件easyUi表单验证提交(示例代码)
  • jquery ajax验证不通过也付出表单难点管理
  • jQuery中证实表单提交情势及种类化表单内容的兑现
  • jquery validate和jquery form 插件组合达成认证表单后AJAX提交
  • jquery达成表单验证并截留违法提交
  • jQuery EasyUI提交表单验证
  • jQuery form插件之formDdata参数校验表单及表达后交由
  • jQuery Real Person验证码插件幸免表单自动提交
  • Jquery演练之表单验证完成代码
  • Jquery表单验证退步后不交付的消除措施

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于www.301net,转载请注明出处:复制代码 代码如下

您可能还会对下面的文章感兴趣: