利用layer实现表单完美验证的方法


Posted in Javascript onSeptember 26, 2019

如下所示:

//基于layer框架之上,验证表单时引用。弹出提示错误
function qxMsg(msgStr) {
 layer.open({
 type: 1,
 title: '提示消息',
 offset: '10%;',
 content: '<div style="padding: 20px 80px;">'+msgStr+'</div>',
 btn: '关闭',
 btnAlign: 'c',
 shade: 0.2,
 yes: function() {
  layer.closeAll();
 }
 });
}

上边是封装好的layer方法,下边是结合表单开始验证

//表单验证
function checkForm() {
 var err = "";
 if(!$('input[name="ggName"]').val()) {
 err += "<br/>名称不能为空";
 }
 if(!$('input[name="isId"]').val()) {
 err += "<br/>空间分类不能为空";
 }
 if(err) {
 err = err.substring(5);
 qxMsg(err);
 return 0;
 }
 return 1;
}
 

在ajax提交表单之前调checkForm方法即可,如:

//提交新增数据
function addGgBaseModel() {
 var flag = checkForm();
 if(flag == 0) return;
 var formData = new FormData(document.getElementById("myform"));
 formData.append("SysType", "10101");
 formData.append("SysName", "qxPC");
 formData.append("ModuleName", "规格型号");
 $.ajax({
 type: 'post',
 url: _URL_BASE + '/ggBaseModel/addGgBaseModel ',
 data: formData,
 cache: false,
 contentType: false,
 processData: false,
 dataType: 'json',
 success: function(retData) {
  console.log(retData);
  if(retData.ReturnType == "1001") {
  qxMsg("添加成功");
  $(".layui-layer-btn0").click(function() {
   $('.modal-backdrop').remove();
   $("#myModal").hide();
   getGgBaseModel();
  })
  } else if(retData.ReturnType == "4004") {
  kickout();
  } else {
  qxMsg(retData.Message);
  }
 },
 error: function(retData) {
  qxMsg("提交数据出错");
 }
 });
};

以上这篇利用layer实现表单完美验证的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
vue实现文件上传功能
Aug 13 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
Web应用开发TypeScript使用详解
May 25 Javascript
vue点击当前路由高亮小案例
Sep 26 #Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 #Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 #Javascript
IDEA安装vue插件图文详解
Sep 26 #Javascript
layui use 定义js外部引用函数的方法
Sep 26 #Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 #Javascript
对Layer UI 模块化的用法详解
Sep 26 #Javascript
You might like
在PHP的图形函数中显示汉字
2006/10/09 PHP
sphinx增量索引的一个问题
2011/06/14 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
Three.js加载外部模型的教程详解
2017/11/10 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Python中的自省(反射)详解
2015/06/02 Python
浅析Git版本控制器使用
2017/12/10 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
python实现的自动发送消息功能详解
2019/08/15 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
python爬虫基础知识点整理
2020/06/02 Python
次世代生活态度:Hypebeast
2018/07/05 全球购物
优秀体育委员自荐书
2014/01/31 职场文书
文明寝室标语
2014/06/13 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
民间借贷借条范本
2015/05/25 职场文书
学习委员竞选稿
2015/11/20 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
如何写好闭幕词
2019/04/02 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书