[Recommended] Form (form) uses Jquery Validate validation and ajax submission

Overview

Explain in detail the process of Form form using Jquery
Validate validation and ajax submission, as well as Validate's custom prompt, non-empty judgment, remote ajax validation of input fields, etc.

Environmental preparation

Introduce four js files in html (jquery file, jquery.form file, jquery.validate file, jquery.validate.extend file):

<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>

download link:

jQuery plug-in 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

Write html area (form and 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>

Write Javascript form validation area

<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>

Effect picture: