jquery.validate校验+jquery.form提交，配合使用

原文链接：http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html

概述：本篇主要讨论jquery.validate结合jquery.form实现对表单的验证和提交方案。

方式一：是通过jquery.validate的submitHandler选项，即当表单通过验证时执行回调函数。在这个回调函数中通过jquery.form来提交表单；

方式二：是通过jquery.form的beforeSubmit，即在提交表单前执行的回调函数，这个函数如果返回true，则提交表单，如果返回false，则终止提交表单。根据jquery.validate插件的valid()方法，就可以通过jquery.form提交表单时来对表单进行验证。

方式三：是通过jquery.validate验证表单的validate方法。这个方法的好处是对表单验证的控制更加*

实例：下面通过三个实例分别阐述上面的三种方式

载入CSS样式文件

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

CSS样式文件内容

input{

  height:25px;

  line-height:25px;

  padding-left:4px;

}

span.checked{

  padding: 0px 5px 0px 25px;

  margin-left: 10px;

  margin-top: 0px;

  margin-bottom: 3px;

  height: 25px;

  line-height:25px;

  font-size: 12px;

  white-space: nowrap;

  text-align: left;

  color: #E6594E;

  background: url("images/acion2.png") no-repeat 3px; /* #FCEAE8 */

}

span.unchecked{

  padding: 0px 5px 0px 25px;

  margin-left: 10px;

  margin-top: 0px;

  margin-bottom: 3px;

  height: 23px;

  line-height:23px;

  font-size: 12px;

  border: 1px solid #E6594E;

  white-space: nowrap;

  text-align: left;

  color: #E6594E;

  background: #FCEAE8 url("images/acion.png") no-repeat 3px;

}

载入javascript文件

<script language="JavaScript" type="text/JavaScript" src="js/jQuery1.6.2.js"></script>

<script language="JavaScript" type="text/JavaScript" src="js/jquery.form.js"></script>

<script language="JavaScript" type="text/JavaScript" src="js/jquery.validate.js"></script>

<script language="JavaScript" type="text/JavaScript" src="js/localization/messages_tw.js"></script>

HTML内容

<body><span id="result"></span>

<form id='commentForm'>

  <fieldset>

  <legend>jquery.validate+jquery.form提交的三种方式</legend>

    <p>

      <label for='cusername'>姓名</label><em>*</em>

      <input id='cusername' name='username' size='25' />

    </p>

    <p>

      <label for='cemail'>电子邮件</label><em>*</em>

      <input id='cemail' name='email' size='25' />

    </p>

    <p>

      <input class='submit' type='submit' value='提交'>

    </p>

  </fieldset>

</form>

</body>

jquery.validate+jquery.form提交方式1的javascript内容

<script language="javascript">

function showResponse(responseText,statusText) {

  if(statusText=='success'){

    $("#result").html(responseText);

  }

}

$(document).ready(function(){

  $('#commentForm').validate({

    focusCleanup:true,focusInvalid:false,

    errorClass: "unchecked",

    validClass: "checked",

    errorElement: "span",

    submitHandler:function(form){

      $(form).ajaxSubmit({

        type:"post",

        url:"test_save.php?time="+ (new Date()).getTime(),

        //beforeSubmit: showRequest,

        success: showResponse

      });

    },

    errorPlacement:function(error,element){

      var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");

      if(s!=null){

        s.remove();

      }

      error.appendTo(element.parent());

    },

    success: function(label) {

      //label.addClass("valid").text("Ok!")

      label.removeClass("unchecked").addClass("checked");

    },

    rules:{

      username:{required:true,minlength:3},

      email:{

        required:true

      }

    }

  });

});

</script>

jquery.validate+jquery.form提交方式2的javascript内容

<script language="javascript">

function showResponse(responseText,statusText) {

  if(statusText=='success'){

    $("#result").html(responseText);

  }

}

function showRequest(formData,jqForm,options){

  return $("#commentForm").valid();

}

$(document).ready(function(){

  $('#commentForm').submit(function(){

    $(this).ajaxSubmit({

      type:"post",

      url:"test_save.php?time="+ (new Date()).getTime(),

      beforeSubmit:showRequest,

      success:showResponse

    });

    return false; //此处必须返回false，阻止常规的form提交

  });

  $('#commentForm').validate({

    focusCleanup:true,focusInvalid:false,

    errorClass: "unchecked",

    validClass: "checked",

    errorElement: "span",

    errorPlacement:function(error,element){

      var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");

      if(s!=null){

        s.remove();

      }

      error.appendTo(element.parent());

    },

    success: function(label) {

      //label.addClass("valid").text("Ok!")

      label.removeClass("unchecked").addClass("checked");

    },

    rules:{

      username:{required:true,minlength:3},

      email:{

        required:true

      }

    }

  });

});

</script>

jquery.validate+jquery.form提交方式3的javascript内容

<script language="javascript">

  var options={

    focusCleanup:true,focusInvalid:false,

    errorClass: "unchecked",

    validClass: "checked",

    errorElement: "span",

    errorPlacement:function(error,element){

      var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");

      if(s!=null){

        s.remove();

      }

      error.appendTo(element.parent());

    },

    success: function(label) {

      //label.addClass("valid").text("Ok!")

      label.removeClass("unchecked").addClass("checked");

    },

    rules:{

      username:{required:true,minlength:3},

      email:{

        required:true

      }

    }

  };

function showResponse(responseText,statusText) {

  if(statusText=='success'){

    $("#result").html(responseText);

  }

}

function showRequest(formData,jqForm,options){

  return $("#commentForm").valid();

}

$(document).ready(function(){

  validator=$('#commentForm').validate(options);

  $("#reset").click(function(){

    validator.resetForm();

  });

  $("button").click(function(){

    validator.form();

  });

  $('#commentForm').submit(function(){

    $(this).ajaxSubmit({

      type:"post",

      url:"test_save.php?time="+ (new Date()).getTime(),

      beforeSubmit:showRequest,

      success:showResponse

    });

    return false; //此处必须返回false，阻止常规的form提交

  });

});

</script>

jquery.validate校验+jquery.form提交，配合使用的更多相关文章

2016 系统设计第一期（档案一）jQuery ajax serialize()方法form提交数据
jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(fun ...
jquery&period;datepicker、jquery&period;validate、jquery&period;uploadify冲突解决
Jquery 1.11.2 Jquery.validate 1.13.1 Jquery.Uploadify 3.2(flash版) Jquery.DatePicker 用的是Jquery-ui 1.1 ...
jquery&period;validate和jquery&period;form配合实现验证表单后AJAX提交
基础代码其实很简单,之后一点一点扩充.最终代码写在最后. 表单: <form action="@Url.Action("AddColumns","Cont ...
JQuery validate&period;js 在ajax提交form时如何触发
在使用jquery validate.js 插件时,发现,如果是用onclick事件捕获提交按钮的动作,并且ajax动态提交form,验证不会被触发,而是直接提交了form. 后来发现,需要手动调用该 ...
Form表单利用Jquery Validate验证以及ajax提交
#表单利用Jquery验证验证以及ajax提交概述>详细讲解表单利用Jquery >验证验证以及ajax提交的过程,以及Validate的自定义提示语,非空判断,输入字段的远程ajax验 ...
jquery validate 校验使用总结
一.jquery.validator表单验证id和name问题因为后台是struts,表单提交,所有输入框的值保存在name=对象.名字中,而jquery.validator表单验证用的是name, ...
Jquery客户端校验——jquery&period;validate&period;js
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
jquery&period;validate校验文件使用说明
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库<script src="../js/ ...
jQuery插件 -- 表单验证插件jquery&period;validate&period;js, jquery&period;metadata&period;js
原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

随机推荐

Docker--在Docker中运行应用
Docker--在Docker中运行应用一个交互式的容器既然在Docker提供的是一个容器,底层支撑着一个基本的操作系统环境,那我们就可以通过Docker进入到容器内部与系统进行交互. 据我理解: ...
jsp页面缓存清理
jsp页面开发过程中,页面修改了,但是显示的还是以前的页面,没有显示刚修改的内容,清理缓存方法,加上头信息: <meta http-equiv="pragma" conten ...
JS获取上传文件的绝对路径，兼容IE和FF
<input type="file" id="fileBrowser" name="fileBrowser" size="5 ...
ios开发之简单实现loading动画效果
最近有朋友问我类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的,是不是就是一个gif图片呢!我的回答当然是否定了,当然不排除也有人用gif图片啊!下面我就来罗列三种实现loadi ...
从理论到实践全面理解HTTP/2
前言为了降低加载时间,相信大多数人都做过如下尝试 Keep-alive: TCP持久连接,增加了TCP连接的复用性,但只有当上一个请求/响应完全完成后,client才能发送下一个请求 Pipelin ...
fab提供远程IP和账号密码
#!/usr/bin/python #-*- coding: UTF-8 -*- from fabric.api import * from fabric.context_managers impor ...
题解 P1034 【矩形覆盖】
题面在平面上有n个点(n≤50),每个点用一对整数坐标表示.例如:当n=4时,4个点的坐标分另为:p1(1,1),p2(2,2),p3(3,6),P4(0,7),见图一. 这些点可以用k个矩形(1≤ ...
python图片处理和matlab图片处理的区别
作者:波布兰链接:https://www.zhihu.com/question/28218420/answer/39904627来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
Postgres数据库备份与还原命令
备份 pg_dump.exe -c -b -E UTF8 -U postgres -h 127.0.0.1 -p 5432 -f "f:\testdb001.bak" testdb ...
flash builder注释字体看不清
window-preferences-flex-editiors-syntex coloring-ActionScript-Comment (窗口-首选项-flashbuilder-编辑器-语法着色- ...