jquery.validate+jquery.form表单验证提交
1.通过jquery.validate的submitHandler选项,即当表单通过验证时运行回调函数。在这个回调函数中通过jquery.form来提交表单;
<script type="text/javascript" src="{$site_url}/assets/js/jquery-1.11.1.min.js"></script>
<script src="{$site_url}/js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript" src="{$site_url}/js/jquery.form.min.js"></script>
<script>
$(function(){
$("#myform").validate({
focusCleanup:true,focusInvalid:false,
errorClass: "unchecked",
validClass: "checked",
errorElement: "span",
submitHandler: function(form) {
$(form).ajaxSubmit({
type:'post',
url: '__URL__/recharge_handle',
beforeSubmit: showRequest, //提交前处理
success: showResponse, //处理完成
resetForm: null,
dataType: 'json'
});
}
});
});
function showRequest(formData, jqForm, options) {
$("input[name='submit']").attr('disabled',true).css({background:'gray'}).val('提交中...');
}
function showResponse(data, statusText) {
$("input[name='submit']").attr('disabled',false).css({background:'#013CA6'}).val('提交');
//alert(JSON.stringify(data));
}
</script>
2.通过jquery.form的beforeSubmit,即在提交表单前运行的回调函数,这个函数假设返回true,则提交表单,假设返回false,则终止提交表单。
依据jquery.validate插件的valid()方法,就能够通过jquery.form提交表单时来对表单进行验证。
<script>
$(function(){
$('#myform').submit(function(){
$(this).ajaxSubmit({
type:"post",
url:"__URL__/recharge_handle",
beforeSubmit:showRequest,
success:showResponse
});
return false; //此处必须返回false,阻止常规的form提交
});
$('#myform').validate({
focusCleanup:true,focusInvalid:false,
errorClass: "unchecked",
validClass: "checked",
errorElement: "span"
});
});
function showRequest(formData, jqForm, options) {
return $("#myform").valid();
}
function showResponse(data, statusText) {
alert(JSON.stringify(data))
}
</script>
3.通过jquery.validate验证表单的validate方法。这种方法的优点是对表单验证的控制更加自由
<script>
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.removeClass("unchecked").addClass("checked");
},
rules:{
username:{required:true,minlength:3},
email:{
required:true
}
}
};
$(function(){
validator=$('#myform').validate(options);
$("#reset").click(function(){
validator.resetForm();
});
$('#myform').submit(function(){
$(this).ajaxSubmit({
type:"post",
url:"__URL__/recharge_handle",
beforeSubmit:showRequest,
success:showResponse
});
return false; //此处必须返回false,阻止常规的form提交
});
});
function showRequest(formData, jqForm, options) {
return $("#myform").valid();
}
function showResponse(data, statusText) {
alert(JSON.stringify(data));
}
</script>
jquery.validate+jquery.form表单验证提交的更多相关文章
- 表单提交学习笔记(二)—使用jquery.validate.js进行表单验证
一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...
- jquery plugin 之 form表单验证插件
基于h5表单验证系统.扩展了对easyui组件的支持 先上图: 提示样式用到了伪对象的 {content: attr(xxx)}函数方法,实现提示信息能动态切换. 1.关键属性说明: type: 表单 ...
- jQuery动态创建form表单并提交到后台(携带一定的数据进行页面跳转)
今天遇到这么一个需求,携带一个编号一个名字跳转到另一个JSP页面,直接页面跳转(get携带数据)的话不太安全,于是想到到后台转发一下. 第一种:直接以表单提交方式的进行 JS代码: var form ...
- jQuery Ajax 确定 form 表单 submit 提交成功
使用 jQuery 提交表单,可以使用 同步方式(async: false). a.html 是 html 文件,a.php 是服务端文件,把 a.html 中表单的数据提交到 a.php 中,在提交 ...
- jQuery Validatede 结合Ajax 表单验证提交
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery.validate.js自定义表单验证
$(document).ready(function() { //在下列位置输入页面加载的逻辑代码 $("#inputForm").validate({ rules: { seq: ...
- form表单验证提交
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于Bootstrap+jQuery.validate Form表单验证实践
基于Bootstrap jQuery.validate Form表单验证实践 项目结构 : github 上源码地址:https://github.com/starzou/front-end- ...
- 使用jquery插件validate制作的表单验证案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- C++ 替换字符串内某个字符或子串
1. 问题描述 string s="abc"; string tmp="1"; 2.解决方案 // tmp 必须为字符串 // 第一个 1 表示 s 中的位置 ...
- 想要table表格垂直滚动,加点CSS即可
<style> /*设置 tbody高度大于400px时 出现滚动条*/ table tbody { display: block; height: 400px; overflow-y: ...
- js 函数定义的两种方式以及事件绑定(扫盲)
一.事件(例如:onclick)绑定的函数定义放在jsp前面和放后面没影响 二. $(function() { function func(){}; }) onclick通过如下方式绑定事件到jsp中 ...
- python中报中文编码异常,Non-ASCII ,but no encoding declared
异常信息: SyntaxError: Non-ASCII character '\xe5' in file a.py on line 9, but no encoding declared; see ...
- 6.JasperReports学习笔记6-jasperreports和ssh工程整合
转自:http://www.blogjava.net/vjame/archive/2013/10/12/404908.html 一.导入jasperreport相关jar包,这里采用当前比较稳定的5. ...
- Storm在zookeeper上的目录结构
storm操作zookeeper的主要函数都定义在命名空间backtype.storm.cluster中(即cluster.clj文件中). backtype.storm.cluster定义了两个重要 ...
- charles请求入参中有乱码
工作中,需要入参,但是发现入参中,有中文的都是乱码,仔细查阅headers,发现Content-Type是application/x-www-form-urlencoded类型,而实际上,入参是jso ...
- JavaScript中创建对象的三种模式
JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返回. 缺点:创建的对象无法识别类型(全是Object) 2.构造函数模式: ...
- URAL 2021 Scarily interesting! (贪心+题意)
题意:给定两个队伍的每个人的得分,让你安排怎么比赛才能使得观众知道冠军的时间最长. 析:贪心,很简单,就是先开始总分高的先出最差劲的,总分低的先出最厉害的,这个题当时实在是读的不明白啊,WA了好多次. ...
- Linux 最小系统挂载U盘(SD、TF卡)并执行程序
一.在Ubuntu下编译C文件 使用指令"arm-none-linux-gnueabi-gcc-4.4.1 -o HelloWorld HelloWorld.c -static"编 ...