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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/s445320/article/details/50748975

＃表单利用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> ```
下载地址：[

jQuery插件之窗体：http：//download.csdn.net/detail/s445320/9438163 ]（http://download.csdn.net/detail/s445320/9438163 ）[ jquery-1.8.3.min.js：http ：//download.csdn.net/detail/s445320/9438161 ]（http://download.csdn.net/detail/s445320/9438161 ）[ jquery.validate.js：http：//download.csdn.net/detail / s445320 / 9612201 ]（http://download.csdn.net/detail/s445320/9612201 ）[ jquery.validate.extend.js：http://download.csdn.net/detail/s445320/9616989 ]（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表单验证区域** ```
 <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>

效果图：