利用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 相关文章推荐
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
Node.js API详解之 zlib模块用法分析
May 19 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 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中的CMS的涵义
2007/03/11 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
JS location几个方法小姐
2008/07/09 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
jquery自定义表格样式
2015/11/23 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
vue实现登录功能
2020/12/31 Vue.js
在Django的上下文中设置变量的方法
2015/07/20 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
三个python爬虫项目实例代码
2019/12/28 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
Python try except finally资源回收的实现
2021/01/25 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
公开服务承诺制度
2014/03/26 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
杜甫草堂导游词
2015/02/03 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
2015年暑假工作总结
2015/07/13 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js
如何使用python包中的sched事件调度器
2022/04/30 Python