jquery validate form 异步提交
jQuery取得select选中的值
jQuery("#select1 option:selected").text();
相信很多人都用过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...
}
});
}
jquery validate form 异步提交的更多相关文章
- 基于Bootstrap+jQuery.validate Form表单验证实践
基于Bootstrap jQuery.validate Form表单验证实践 项目结构 : github 上源码地址:https://github.com/starzou/front-end- ...
- 使用jquery.form异步提交注意jquery.validate需要手动添加验证
使用jquery.form.js异步提时,即使jquery.validate验证失败也会提交的所以加个$("form").valid()来判断是否通过验证: $("#fo ...
- jquery validate不用submit提交,用js提交的
jquery validate控件 默认是使用submit提交的, 要想改成使用button的click事件处理函数中手工提交, 可以按照如下方式操作: 1 绑定form的validate, 2 然后 ...
- jQuery——表单异步提交
如果不做任何处理,表单提交时会刷新页面,为了改善体验,可以使用jQuery做到异步提交表单:通过$("#form").serialize()将表单元素的数据转化为字符串,然后通过$ ...
- jquery validate如何不提交表单就做验证(ajax提交数据)
if($("#FromID").valid()){ $.ajax({ type:'post', url:'/CampaignOrderRelations/save', data:{ ...
- jquery validate 在ajax提交表单下的验证方法
$(function() { var method='${method }'; if(method == 'edit'){ url="${ctx}/commodity/typeReN ...
- Jquey Form 异步提交文件参数并且在http 信息头header中加上一定参数
1.下载jQuery.Form 包 官网下载:http://jquery.malsup.com/form/#download 2.模拟代码: <!DOCTYPE html> <htm ...
- amazeui表单form异步提交方法
// 留言提交 $(function() { var $form = $('#ue-form'); $form.validator({ validateOnSubmit: true, submit: ...
- jQuery - 几种异步提交方式
$.post(url,params,callback); $.post("${ctx}/role/grant", {userId : $("#userId"). ...
随机推荐
- Hadoop学习历程(三、第一个程序)
根据之前的操作,我们已经可以正常的启动Hadoop了,关于真正的集群我会在之后进行说明.现在我们来看一下第一个程序吧 1. 在eclipse上建立一个java项目 2. 将 /usr/hadoop/s ...
- Python学习笔记整理(三)Python中的动态类型简介
Python中只有一个赋值模型 一.缺少类型声明语句的情况 在Python中,类型是在运行过程中自动决定的,而不是通过代码声明.这意味着没有必要事声明变量.只要记住,这个概念实质上对变量,对象和它们之 ...
- 使用laravel的任务调度(定时执行任务)
laravel中有一个很强大上的功能,只需要在服务器上添加一个cron条目,就可以定时执行所有的laravel任务. 现在有如下数据表: 我想让cron表中的cron字段的值每分钟增加1,那么我需要如 ...
- 使用Volley StringRequest Get的方式进行发票查询操作
//进行发票查询 btnFpSelect.setOnClickListener(btnFpSelectClickListener); private OnClickListener btnFpSele ...
- MySQL 学习笔记 (limit offset)
select * from table limit (10000,10);这样是很慢的,因为要定位 比较快的写法是 select * from table where id >=(select ...
- 智能卡安全机制比较系列(三) MPCOS
MPCOS是金普斯早期推出的一款多应用支付芯片卡操作系统,支持ISO7816以及PCOS的数据格式和命令.MPCOS具有两级目录文件结构,即MF下可以有一级DF,每个DF下最多可创建63个EF. MP ...
- Android开发多线程断点续传下载器
使用多线程断点续传下载器在下载的时候多个线程并发可以占用服务器端更多资源,从而加快下载速度,在下载过程中记录每个线程已拷贝数据的数量,如果下载中断,比如无信号断线.电量不足等情况下,这就需要使用到断点 ...
- Git 2.7: 一个新的带来许多新特性和性能提升的主要版本
在2.6版本发布两个月之后,Git 2.7发布.该版本带来了许多新特性以及性能的提升. 本文选取了Git 2.7带来的主要变化: git remote支持get-url子命令,可以显示指定远端的URL ...
- 第25讲 UI组件之 AlertDialog 的各种实现
第25讲 UI组件之AlertDialog 的各种实现 对话框(Dialog)是程序运行中的弹出窗口,例如当用户要删除一个联系方式时,会弹出一个对话框. Android提供了多种对话框:警告对话框(A ...
- hdu 5422 Rikka with Graph(简单题)
Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, so he ...