一个简单的jquery ajax表单提交 带数据校验 layer弹框提示

<input type="hidden" id="url" value="index.php"/>
<form id="form">
<label>姓名<sup>*</sup> <input type="text" name="name" id="name" placeholder="姓名" value=""></label>
<label>电话<sup>*</sup> <input type="text" name="mobile" id="mobile" placeholder="手机号码" value=""></label> <label>意向城市<sup>*</sup>
<input type="text" name="city" id="city" placeholder="意向城市" value="">
</label>
<button type="button" onclick="submitData()">提交</button>
</form>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/lib/layer.min.auto.js"></script>
<script>
//ajax提交
function submitData() {
//数据验证
if ($('#name').val() == '') {
layer.msg('姓名不能为空');
return false;
}
if ($('#mobile').val() == '') {
layer.msg('手机号码不能为空');
return false;
}
var phone = $('#mobile').val();
var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(!myreg.test(phone)){
layer.msg ( "请输入有效的手机号码!");
return false;
}
if ($('#city').val() == '') {
layer.msg('意向城市不能为空');
return false;
}
var url = $("#url").val();
var data = $("#form").serialize();
$.ajax({
url: url,
type: "POST",
url: url,
data: data,
async: false,
success: function (res) {
var obj = jQuery.parseJSON(res);
if (obj.rst == 1) {
layer.msg("提交成功");
setTimeout("location.reload()",2000);
} else {
layer.msg(obj.msg);
setTimeout("location.reload()",2000);
}
}
});
}
</script>
一个简单的jquery ajax表单提交 带数据校验 layer弹框提示的更多相关文章
- jQuery ajax表单提交
Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form ...
- jQuery ajax表单提交实现局部刷新
jQuery Ajax 异步提交 Form 表单,如果使用 get 请求,注意中文乱码问题,jquery 会先使用 iso8859-1 解码,然后发给服务器,如果使用 post 请求,则直接将中文内容 ...
- AJAX表单提交以及数据接收
ajax是一种传输方式,数据不是提交给ajax,而是 数据 由 ajax提交到后台(并不刷新页面) 要实现一个简单的ajax请求,要这3样东西,一个html页,一段js代码,一个可以响应请求的后台 这 ...
- Ajax表单提交插件jquery form
jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...
- 使用Jquery.form.js ajax表单提交插件弹出下载提示框
现象: 使用jquery的from做ajax表单提交的时候,后台处理完毕返回json字符串,此时浏览器提示下载一个json文件而不是在success里面继续解析该json对象. 具体的原因: 浏览器兼 ...
- jquery插件-表单提交插件-jQuery.Form
1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...
- jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用
一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...
- 每天一个JavaScript实例-防止反复表单提交
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- vsftpd 530 Login incorrect问题处理
vsftpd 530 login incorrect 的N中情况 1.密码错误. 2.检查/etc/vsftpd/vsftpd.conf配置 vim /etc/vsftpd/vsftpd.conf 看 ...
- PythonI/O进阶学习笔记_3.1面向对象编程_python的多态和鸭子类型
前言: 与第一篇的面向对象内容不同的是,第一篇中的面向对象更多的是与类.对象结合起来的概念粗浅理解,就是在编程历史中诞生的一种思想方法. 这篇的面向对象编程,更多落实到在语言设计实现中,是如何体现面向 ...
- Oracle笔记_基础
1 登录启动 sqlplus / as sysdba #以管理员方式登录 sqlplus 用户名/密码 #本地登录 sqlplus 用户名/密码@//主机IP/实例名(默认orcl) #远程登录 sq ...
- Hadoop RPC机制详解
网络通信模块是分布式系统中最底层的模块,他直接支撑了上层分布式环境下复杂的进程间通信逻辑,是所有分布式系统的基础.远程过程调用(RPC)是一种常用的分布式网络通信协议,他允许运行于一台计算机的程序调用 ...
- Linux shell 获得字符串所在行数及位置
shell 获得字符串所在行数及位置 01 获取字符串所在的行数 方式一:用grep -n [root@root]# cat test apple bit create delect exe flow ...
- Javaweb Session机制(有待补充)
Javaweb Session机制 一.前言 session,中文经常翻译为会话,其本来的含义是指有始有终的一系列动作/消息,比如打电话是从拿起电话拨号到挂断电话这中间的一系列过程可以称之为一个ses ...
- MSIL实用指南-struct的生成和操作
struct(结构)是一种值类型,用于将一组相关的信息变量组织为一个单一的变量实体.所有的结构都继承自System.ValueType类,因此是一种值类型,也就是说,struct实例分配在线程的堆栈( ...
- JVM参数配置&&命令工具
JVM参数配置 大致方向:JVM调优的目的是保证在一定吞吐量的情况下尽可能的减少GC次数,从而减少系统停顿时间,提高服务质量和效率. 其中减少GC次数的原则: 将新生代转换成老年代的数量降至最少(及时 ...
- library not found for -ljpush-ios-3.2.1错误
很多人在更新pod后报 library not found for -ljpush-ios-3.2.1(举例)错误,这其实是包含版本号类型错误. 究其原因:使用了版本号做库名字,pod升级后 Podf ...
- HDU 6364 Ringland
Ringland 题意: 在一个环上有n个男生, n个女生, 现在要求每一个男生与女生配对, 求总代价最小. 题解: 如果2个男生到女生的路交叉了, 那么我们交换这2个男生的路, 总代价是一定会变得小 ...