一个简单的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 ...
随机推荐
- C++函数中,两个自动释放内存的动态内存申请类
最近做一个事情,实现一个流程交互,其中主交互流程函数中,涉及较多的内存申请, 而健康的函数,都是在函数退出前将手动申请不再需要的内存释放掉, 使用很多方法,都避免不了较多的出错分支时,一堆的if fr ...
- Spring-Boot:拦截器注解范例
package com.example.aop; import java.lang.annotation.Documented; import java.lang.annotation.Element ...
- 再读faster rcnn,有了深层次的理解
1. https://www.wengbi.com/thread_88754_1.html (图) 2. https://blog.csdn.net/WZZ18191171661/article/de ...
- Windows下如何使用Tensorflow Object Detection API
https://blog.csdn.net/mr_jor/article/details/79071963 记得要把model里的research文件夹和research\slim 文件夹 添加到PY ...
- 【入门】广电行业DNS、DHCP解决方案详解(一)——历史及现状篇
广电发展历史 单项网络 双向网络 智能网络 广电网络现状 广电网络典型特征 接入技术混杂 承载业务多样化 业务终端错综复杂 其他 网络现状模型 总结 广电发展历史 广电就是广播电视,广电发展可以分为三 ...
- 在 Web 级集群中动态调整 Pod 资源限制
作者阿里云容器平台技术专家 王程阿里云容器平台技术专家 张晓宇(衷源) ## 引子 不知道大家有没有过这样的经历,当我们拥有了一套 Kubernetes 集群,然后开始部署应用的时候,我们应该给容器分 ...
- unity编辑器扩展_07(创建对话框,检测按钮的点击,点击按钮后提示信息,保存设置的数据,显示点击按钮后的处理的进度条信息)
代码: using UnityEditor;using UnityEngine; public class ChangeValue : ScriptableWizard { ...
- 人员考勤,MySQLl数据库一个表自动生成3表筛选人员迟到早退缺勤
前言:漂亮的人事小姐姐找我帮忙弄考勤:由于人员考勤和门禁一起,打卡记录太多,打卡机只能导出一个打卡Excel总表,不容易人工筛选. Excel表的格式是这样的:(这里101代替真实人名) 实现目标: ...
- linux安装redis详细步骤(系统centos 6.4 )
1.安装redis 进入安装目录下载: cd /usr/local/redis wget http://download.redis.io/releases/redis-3.0.7.tar.gz 解 ...
- Java中指令重排
/** * 指令重排:代码执行顺序与预期不一致 (发生在前后行代码无联系时) * 目的:提高性能 * */ public class HappenBefore { private static int ...