利用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 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
js模拟实现百度搜索
Jun 28 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 Javascript
vue常用高阶函数及综合实例
Feb 25 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
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
PHP多进程编程实例
2014/10/15 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
vue移动端实现红包雨效果
2020/06/23 Javascript
js module大战
2019/04/19 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
django 自定义用户user模型的三种方法
2014/11/18 Python
解决Python requests 报错方法集锦
2017/03/19 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
python如何查看网页代码
2020/06/07 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
超市营业员岗位职责
2013/12/20 职场文书
同居协议书范本
2014/04/23 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
销售辞职信范文
2015/03/02 职场文书
同乡会致辞
2015/07/30 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python