利用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实现动态添加删除评论的方法
May 18 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
JS实现炫酷雪花飘落效果
Aug 19 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
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
一个JS的日期格式化算法示例
2013/07/31 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
python实现ipsec开权限实例
2014/11/11 Python
Python的动态重新封装的教程
2015/04/11 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
Python字符串格式化
2015/06/15 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
Python使用贪婪算法解决问题
2019/10/22 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
销售文员的岗位职责
2013/11/20 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
党员批评与自我批评
2014/10/15 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL