Form表单利用Jquery Validate验证以及ajax提交

表单利用Jquery验证验证以及ajax提交

概述>详细讲解表单利用Jquery >验证验证以及ajax提交的过程，以及Validate的自定义提示语，非空判断，输入字段的远程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> 

## 编写html区域（form及input）

```javascript
<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表单验证区域

 <script type =“text / javascript “> 
  $（document）.ready（
    function（）{ 
      $（”＃inputForm“）。validate（{ 
        submitHandler：function（form）{//验证通过后的执行方法
            //当前的窗体通过ajax方式提交（用到jQuery.Form文件）
          	$（form）.ajaxSubmit（{ 
                dataType：“json”，
				成功：函数（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>

效果图：