利用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 相关文章推荐
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
php实现的操作excel类详解
2016/01/15 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
Python实现豆瓣图片下载的方法
2015/05/25 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
如何使用Python 打印各种三角形
2019/06/28 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
农村党支部先进事迹
2014/01/14 职场文书
会议邀请书范文
2014/02/02 职场文书
高中军训第一天感言
2014/03/06 职场文书
怀念母亲教学反思
2014/04/28 职场文书
李开复演讲稿
2014/05/24 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
化工厂员工工作总结
2015/10/15 职场文书
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis