案例


今天有一个需求就是点击按钮时,使用ajax方式提交表单,而且不是直接用form表单下的submit按钮提交,表单中用的校验是dwz 自带的校验方式,表单模板如下:

 <li><div class="data_detail">
<span class="data_name">办公电话:</span>
<div class="data_info">
<input type="text" htitle="办公电话" class="required digits"
maxlength="12" name="creditcardCustomerJob.tel"
value="${creditcardCustomerJob.tel}" />
</div>
</div></li>

ajax调用方式如下:

 //提交表单
$.ajax({
type: $form .method || 'POST',
url:$form.attr("action"),
data:$form.serializeArray(),
dataType:"json",
cache: false,
success: function(data, textStatus) {
result.msg = data.message;
result.flag = true;
return result;
},
error: function(data,
textStatus, errorThrown) {
result.msg = data.message;
result.flag = false;
return result;
}
});

发现使用ajax提交方式,并不会调用表单中的校验(class="required digits"),而是直接提交了


解决方案


使用Jquery 插件中的valid方法,在js中使用$fom.valid()方式就可以在ajax方式调用form表单中配置的校验方法了

Jquery 插件中的valid插件

// http://docs.jquery.com/Plugins/Validation/valid
valid: function() {
if ( $(this[0]).is('form')) {
return this.validate().form();
} else {
var valid = true;
var validator = $(this[0].form).validate();
this.each(function() {
valid &= validator.element(this);
});
return valid;
}
}




例子:
function submitPersonalInfo(type) {
var result = new Object();
var $form = _$("#personal_info_form");
if (!$form.valid()) {
result.flag = false;
return result;
}
//提交表单
$.ajax({
type: $form .method || 'POST',
url:$form.attr("action"),
data:$form.serializeArray(),
dataType:"json",
cache: false,
success: function(data, textStatus) {
result.msg = data.message;
result.flag = true;
return result;
},
error: function(data,
textStatus, errorThrown) {
result.msg = data.message;
result.flag = false;
return result;
}
}); return result;
}

Jquery validate插件源码


$.extend($.fn, {
// http://docs.jquery.com/Plugins/Validation/validate
validate: function( options ) { // if nothing is selected, return nothing; can't chain anyway
if (!this.length) {
options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );
return;
} // check if a validator for this form was already created
var validator = $.data(this[0], 'validator');
if ( validator ) {
return validator;
} validator = new $.validator( options, this[0] );
$.data(this[0], 'validator', validator); return validator;
},
// http://docs.jquery.com/Plugins/Validation/valid
valid: function() {
if ( $(this[0]).is('form')) {
return this.validate().form();
} else {
var valid = true;
var validator = $(this[0].form).validate();
this.each(function() {
valid &= validator.element(this);
});
return valid;
}
},
// attributes: space seperated list of attributes to retrieve and remove
removeAttrs: function(attributes) {
var result = {},
$element = this;
$.each(attributes.split(/\s/), function(index, value) {
result[value] = $element.attr(value);
$element.removeAttr(value);
});
return result;
},
// http://docs.jquery.com/Plugins/Validation/rules
rules: function(command, argument) {
var element = this[0]; if (command) {
var settings = $.data(element.form, 'validator').settings;
var staticRules = settings.rules;
var existingRules = $.validator.staticRules(element);
switch(command) {
case "add":
$.extend(existingRules, $.validator.normalizeRule(argument));
staticRules[element.name] = existingRules;
if (argument.messages)
settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );
break;
case "remove":
if (!argument) {
delete staticRules[element.name];
return existingRules;
}
var filtered = {};
$.each(argument.split(/\s/), function(index, method) {
filtered[method] = existingRules[method];
delete existingRules[method];
});
return filtered;
}
} var data = $.validator.normalizeRules(
$.extend(
{},
$.validator.metadataRules(element),
$.validator.classRules(element),
$.validator.attributeRules(element),
$.validator.staticRules(element)
), element); // make sure required is at front
if (data.required) {
var param = data.required;
delete data.required;
data = $.extend({required: param}, data);
} return data;
}
});

Dwz/Jquery--使用Ajax提交表单时调用表单设置的校验的更多相关文章

  1. 今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式

    今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...

  2. jquery实现ajax提交form表单的方法总结

    本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一:  function AddHandlingFeeToRefund( ...

  3. 解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位

    $(function () { //解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位 var u = navigator.userAgent; var isiOS = !! ...

  4. jquery 的 ajax 在 非阻塞 时返回 XMLHttpRequest

    jquery 的 ajax 在 非阻塞 时返回 是 [object XMLHttpRequest] 对象(firefox 下 alert(对象名) 也可以直接看到对象类型) 返回的内容用 reques ...

  5. 利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先来个简单的实例热热身吧. 1.无参数的方法调用 asp.net code: view plaincopy to clip ...

  6. 类型:Jquery;问题:jquery调用后台带参数方法;结果:利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod]   命名空间 1.无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod] ...

  7. php使用jquery Form ajax 提交表单,并上传文件

    在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交.   一.jquery.form.js下载地址 ...

  8. jquery实现ajax提交表单

    一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...

  9. jquery实现ajax提交表单信息

    最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习jquery,基本上是现学现找,有点困难. 主要是扩展和拼接json转对象 很简单,附上代码: ; ...

随机推荐

  1. Cocos Creator | 飞刀大乱斗开发教程系列(一)

    预览效果 具体内容 ■ 这一期,主要讲解主页下方列表选项如何实现.也就是游戏开始后,加载所有现有的英雄列表,这一功能的实现,如下图部分. ■ 列表使用 ScrollView 实现,横向滚动,设置好上下 ...

  2. 【题解】Vijos1404 遭遇战(最短路图论套路)

    [题解]Vijos1404 遭遇战(最短路图论套路) 感觉一定要有建模的思想,不管什么东西要抽象建模之后再用算法解决... 求最短代价就可能可以用最短路,这句话不是强行解释,而是因为图论建模过后,可能 ...

  3. IDEA模板快捷键

    2.1 psvm:可生成 main 方法 2.2 sout:System.out.println() 快捷输出 类似的: soutp=System.out.println("方法形参名 = ...

  4. Python 线性回归(Linear Regression) - 到底什么是 regression?

    背景 学习 Linear Regression in Python – Real Python,对 regression 一词比较疑惑. 这个 linear Regression 中的 Regress ...

  5. 洛谷P2657 [SCOI2009]windy数 题解 数位DP

    题目链接:https://www.luogu.com.cn/problem/P2657 题目大意:找区间 \([A,B]\) 范围内 不含前导零 且 相邻两个数字之差至少为2 的正整数的个数. 题目分 ...

  6. InnoDB与MyISAM的区别(高性能MySQL笔记)

    1.InnoDB支持事务,MyISAM不支持,也就是说MyISAM不支持事务回滚操作,这个功能可能是致命的 2.InnoDB支持行锁,MyISAM只支持表锁,不过InnoDB的行锁是建立在索引之上的, ...

  7. ZooKeeper Java Example

    A Simple Watch Client Requirements Program Design The Executor Class The DataMonitor Class Complete ...

  8. Android Studio build不显示Generate signed apk问题

    如果是刚装的AS,那么新建一个项目,进入项目后,会发现build选项卡缺了一些选项,同时底部sync在转圈圈,其实是AS在自动下载gradle,也许还在下载build-tools,我等了11分钟才结束 ...

  9. 微信小程序---自定义三级联动

    在开发的很多电商类型的项目中,免不了会遇到三级联动选择地址信息,如果单纯的使用文本框给用户选择,用户体检可能就会差很多.今天我给大家整理了关于小程序开发利用picker-view组件和animatio ...

  10. python切片(获取一个子列表(数组))

    切片: 切片指从现有列表中,获取一个子列表 返回一个新列表,不影响原列表. 下标以 0 开始: list = ['红','绿','蓝','白','黑','黄','青']# 下标 0 1 2 3 4 5 ...