欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-25 15:47:22
...

概述

详细讲解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>

效果图:

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