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

简介: Form表单利用Jquery Validate验证以及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>

效果图:

目录
相关文章
|
2月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
33 0
|
2月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
22小时前
|
JavaScript 前端开发 Java
jquery ajax+spring mvc上传文件
jquery ajax+spring mvc上传文件
|
17天前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery最方便的前端验证方式2种(非空验证与比较验证)
jQuery最方便的前端验证方式2种(非空验证与比较验证)
22 0
|
17天前
|
JavaScript 前端开发 数据格式
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
33 0
|
29天前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
13 0
|
1月前
|
JavaScript 数据安全/隐私保护
jquery正则表达式验证手机号密码和姓名字段
jquery正则表达式验证手机号密码和姓名字段
|
1月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
37 0
|
2月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
|
2月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
36 0