一个简单的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 ...
随机推荐
- 外观/门面模式(Facade)
2015/4/28 外观/门面模式(Facade),为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. #include <vector> ...
- swith case判断
swith case是js中的一种判断方式 应用于变量或表达式在不同值情况下的不同操作,每一种case结束都要加break结束整个判断 var num = 2; switch(num){ case 0 ...
- unity_小功能实现(碰撞检测)
1.触发器Trigger:勾选IsTrigger属性 //当player刚进入触发区域的时刻发生触发检测,比如在靠近门的某个区域门一直处于开着状态 void OnTriggerEnter(Collid ...
- mysql8.0版本下命令行mysqld –skip-grant-tables 失效,无法登陆的问题
1.管理员权限登陆cmd,不会使用管理员登陆的请搜索cmd,搜索结果右键. 2.命令行输入:net stop mysql;然后提示.服务停止中 --> 服务已停止,如出现其他错误请百度. 这只是 ...
- Linux下手动安装MySQL5.7
1.下载tar包,这里使用wget从官网下载 https://dev.mysql.com/downloads/mysql/ 2.将mysql安装到/usr/local/mysql下 # 解压 tar ...
- VMware虚拟机安装Linux系统详细教程
VMware14虚拟机安装RedHad6系统步骤 redhat网盘资源:链接:https://pan.baidu.com/s/1GlT20vevqbZ9qTxsGH1ZzA 提取码:oh57 如果网盘 ...
- 用webpack构建一个常规项目,好处和坏处分析
最近项目改版,用webpack重新架构. 些许心得我会写几篇记录一下. 好处如下: 1.ES6语法用起来,babel-loader转义,各种新语法用起来. 2.import 语法写起来,webpack ...
- git-基础命令使用
1. 创建版本库 什么是版本库你?版本库有名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被git管理起来,每个文件的修改.删除.git都能跟踪,以便 ...
- Springboot中RedisTemplate的操作
Springboot中RedisTemplate的操作 @Autowired private RedisTemplate redisTemplate; @Autowired private Strin ...
- [大数据学习研究]1.在Mac上利用VirtualBox搭建本地虚拟机环境
1. 大数据和Hadoop 研究学习大数据,自然要从Hadoop开始. Hadoop不是一个简单的软件,而是有一些列软件形成的生态,其核心思想来自Google当初发布的三篇论文,后来做了开源的实现, ...