利用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 相关文章推荐
JS上传前预览图片实例
Mar 25 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
基于vue.js实现的分页
Mar 13 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
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
3种php生成唯一id的方法
2015/11/23 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
一个超级简单的python web程序
2014/09/11 Python
利用Python演示数型数据结构的教程
2015/04/03 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Python生成词云的实现代码
2020/01/14 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
非常详细的C#面试题集
2016/07/13 面试题
应用电子技术专业个人求职信
2013/09/21 职场文书
自我鉴定三原则
2014/01/13 职场文书
装饰活动策划方案
2014/02/11 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
结婚堵门保证书
2015/05/08 职场文书
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫
Python使用Web框架Flask开发项目
2022/06/01 Python