一个简单的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 ...
随机推荐
- 《Java 8 in Action》Chapter 4:引入流
1. 流简介 流是Java API的新成员,它允许你以声明性方式处理数据集合(通过查询语句来表达,而不是临时编写一个实现).就现在来说,你可以把它们看成遍历数据集的高级迭代器.此外,流还可以透明地并行 ...
- java 正则 替换中文为空
//中文替换为"" public String replaceChineseToNULL(String s){ String reg = "[\u4e00-\u9fa5] ...
- Google Protocol Buffer Basics: C++
proto文件简介 每个元素上的"= 1","= 2"标记标识该字段在二进制编码中使用的唯一"标记" 每个字段有三个可选修饰符 requir ...
- 【转】python爬虫之腾讯视频vip下载
本文转自如下:作者:jia666666 原文:https://blog.csdn.net/jia666666/article/details/82466553 版权声明:本文为博主原创文章,转载请附上 ...
- Android Studio启动模拟器失败
启动Android Studio的模拟器报“Emulator: Process finished with exit code -1073741819 (0xC0000005)”错误教程: 1.进入该 ...
- MySQL数据库之表的增删改查
目录 MySQL数据库之表的增删改查 1 引言 2 创建表 3 删除表 4 修改表 5 查看表 6 复制表 MySQL数据库之表的增删改查 1 引言 1.MySQL数据库中,数据库database就是 ...
- C#开发BIMFACE系列13 服务端API之获取转换状态
系列目录 [已更新最新开发文章,点击查看详细] 在<C#开发BIMFACE系列12 服务端API之文件转换>中详细介绍了7种文件转换的方法.发起源文件/模型转换后,转换过程可能成功 ...
- Android读取date中年月日
1.Date对象:Date date = getDate(); 2.Calendar实例:Calendar calendar = Calendar.getInstance(); 3.calendar. ...
- P2774 方格取数问题 网络最大流 割
P2774 方格取数问题:https://www.luogu.org/problemnew/show/P2774 题意: 给定一个矩阵,取出不相邻的数字,使得数字的和最大. 思路: 可以把方格分成两个 ...
- 洛谷P1273 有线电视网 树上分组背包DP
P1273 有线电视网 )逼着自己写DP 题意:在一棵树上选出最多的叶子节点,使得叶子节点的值 减去 各个叶子节点到根节点的消耗 >= 0: 思路: 树上分组背包DP,设dp[u][k] 表示 ...