异步提交form的时候利用jQuery validate实现表单验证
异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则
// 电话号码验证
jQuery.validator.addMethod("isPhone", function(value, element) {
var tel = /^(\d{3,4}-?)?\d{7,9}(-?\d{1,4})?$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码");
验证通过,表单提交。但我们常常会碰到这样的需求,当验证通过后,我不需要通过submit form的方式提交表单,我想要更灵活的通过ajax处理表单,加入很多动态的效果,提高客户体验,请看下面的例子:
有一个表单:
<form id="formId" action="">
姓名:<input type="text" name="name">
电话:<input type="text" name="phone">
<input type="button" value="submit" onclick="doSubmit();">
</form>
以下是JS:
function doSubmit() {
validateForm();//调用验证方法
//do something else...
}
function validateForm() {
var validator = $("#formId").validate({
errorElement: "em",
success: function(em) {
em.text("ok").addClass("success");//验证通过的动态CSS
},
submitHandler:function() {
ajaxSubmitForm();
},//这是关键的语句,配置这个参数后表单不会自动提交,验证通过之后会去调用的方法
rules: {
name: {
required: true,
maxlength: 100
},
phone: {
isPhone: true
}
},
messages: {
name: {
required: "请填写姓名",
maxlength: "姓名不超过100个字符"
}
}
});
}
function ajaxSubmitForm() {
var para = ;//组织参数
var url = "/jajax/saveForm.do";
$.ajax({
type: "post",
cache: false,
dataType: "json",
url: url,
data: para,
beforeSend: function(XMLHttpRequest){
//do something before submit...
},
success: function(data, textStatus){
//do something after submited...
},
complete: function(XMLHttpRequest, textStatus){
//do something in the end...
}
});
}
这样就非常灵活的完成了表单的验证和提交,其中很多时间节点都由我们自由的控制,加入任意你想做的事,是不是很方便呢...
异步提交form的时候利用jQuery validate实现表单验证的更多相关文章
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- 基于Jquery Validate 的表单验证
基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...
- jQuery.validate.js表单验证插件
jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
- jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- jquery.validate.js 表单验证简单用法
引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...
- layer,Jquery,validate实现表单验证,刷新页面,关闭子页面
1.表单验证 //获取父层 var index = parent.layer.getFrameIndex(window.name); //刷新父层 parent.location.reload(); ...
- 【转】jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- [转]jquery.validate.js表单验证
原文地址:https://www.cnblogs.com/si-shaohua/p/3780321.html 一.用前必备官方网站:http://bassistance.de/jquery-plugi ...
- 表单验证代码实例:jquery.validate.js表单验证插件
jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...
随机推荐
- Hadoop-2.2.0中国文献—— Web应用代理
Web应用代理是YARN的一部分. 默认地,它会作为 Resource Manager(RM)的一部分来执行, 可是也能够配置成独立执行的模式.使用代理的原因就是减少通过YARN的web攻击的可能性. ...
- iOS中通讯录电话号码空格问题
今天在读取通讯录的时候,读取到的手机号码格式为* (***) ***-****的,乍看下,数字中间有空格."-".(.)的非数字字符. 然后我就打算替换这些非数字字符,结果替换完, ...
- Repeater在无数据记录时显示暂无数据
原文:Repeater在无数据记录时显示暂无数据 方法就是在FooterTemplate加个Label并根据repeater.Items.Count判断是否有记录.关键代码如下: <Footer ...
- Linux 编程学习笔记----命令行参数处理
转载请注明出处.http://blog.csdn.net/suool/article/details/38089001 问题引入----命令行參数及解析 在使用linux时,与windows最大的不同 ...
- 数据结构:循环队列(C语言实现)
生活中有非常多队列的影子,比方打饭排队,买火车票排队问题等,能够说与时间相关的问题,一般都会涉及到队列问题:从生活中,能够抽象出队列的概念,队列就是一个能够实现"先进先出"的存储结 ...
- POJ 3979 分数减法【数学问题的探讨】
将a/b和c/d简化一下就可以了 分数加减法 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12588 Accepted ...
- 【年终分享】彩票数据预测算法(一):离散型马尔可夫链模型实现【附C#代码】
原文:[年终分享]彩票数据预测算法(一):离散型马尔可夫链模型实现[附C#代码] 前言:彩票是一个坑,千万不要往里面跳.任何预测彩票的方法都不可能100%,都只能说比你盲目去买要多那么一些机会而已. ...
- linux Apache安装
原文:linux Apache安装 1. 下载apache,http://httpd.apache.org/download.cgi 通过这个官方网站,我们可以下到最新的版本.现在版本都 ...
- zoj 3203 Light Bulb,三分之二的基本问题
Light Bulb Time Limit: 1 Second Memory Limit: 32768 KB Compared to wildleopard's wealthiness, h ...
- 现代JVM内存管理方法的发展历程,GC的实现及相关设计概述(转)
JVM区域总体分两类,heap区和非heap区.heap区又分:Eden Space(伊甸园).Survivor Space(幸存者区).Tenured Gen(老年代-养老区). 非heap区又分: ...