【推荐】Form（表单）利用Jquery Validate验证以及ajax提交

概述

详细讲解Form表单利用Jquery
Validate验证以及ajax提交的过程，以及Validate的自定义提示语，非空判断，input字段的远程ajax验证等。

环境准备

在html中引入四个js文件（jquery文件，jquery.form文件，jquery.validate文件，jquery.validate.extend文件）：

<script src="/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/jquery/jQuery.Form.js" type="text/javascript"></script>
<script type="text/javascript" src="/jquery/jquery.validate.js" charset="UTF-8"></script>
<script type="text/javascript" src="/jquery/jquery.validate.extend.js" charset="UTF-8"></script>

下载地址：

jQuery插件之Form：http://download.csdn.net/detail/s445320/9438163

jquery-1.8.3.min.js：http://download.csdn.net/detail/s445320/9438161
jquery.validate.js：http://download.csdn.net/detail/s445320/9612201

jquery.validate.extend.js : http://download.csdn.net/detail/s445320/9616989

编写html区域（form及input）

<form id="inputForm" name="inputForm" action="../xxxx/xxxxaccount" method="post" novalidate="novalidate">
<input type="text" name="name" id="name" class="form-control required"  value="刘伟" onfocus=this.blur()>
</form>

编写Javascript form验证区域

<script type="text/javascript">
  $(document).ready(
    function() {
      $("#inputForm").validate({
        submitHandler : function(form) {  //验证通过后的执行方法
            //当前的form通过ajax方式提交（用到jQuery.Form文件）
            $(form).ajaxSubmit({
                dataType:"json",
                success:function( jsondata ){
                    if( jsondata.code = 200 ){
                        alert("success");
                    }else{
                        alert("fail");
                    }
                  }
                }); 

        },
        focusInvalid : true,   //验证提示时，鼠标光标指向提示的input
        rules : {  //验证尺度  
          account : {  
            required : true,   //验证非空
            remote: {          //远程ajax验证
                url: "../xxxx/checkaccount", //检查是否存在账号，存在则返回true
                type: "GET",
                dataType: "json",
                data: {
                    account: function () {
                        return $("#account").val(); //这个是取要验证的用户名
                    }
                },
                dataFilter: function (data) {  //判断控制器返回的内容
                    var notice = eval("("+ data +")");
                    if( notice ){
                        return false;
                    }else{
                        return true;
                    }
                }
            }
          },  
        },  
        messages : {  
          account : {  
            required : "用户名不能为空",
            remote: "用户名已存在！"  //这个地方如果不写的话，是自带的提示内容，加上就是这个内容。
          }
        },  
        errorElement : "div",
        errorClass : "error_info",
        highlight : function(element, errorClass,
            validClass) {
          $(element).closest('.form-control').addClass(
              'highlight_red');
        },
        success : function(element) {
          $(element).siblings('.form-control')
              .removeClass('highlight_red');
          $(element).siblings('.form-control').addClass(
              'highlight_green');
          $(element).remove();
        }

      });
    });
</script>

效果图：

扫描二维码关注公众号，回复： 164854 查看本文章