利用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下用eval生成JSON对象
Sep 17 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 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
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
PHP内置加密函数详解
2016/11/20 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
c++生成dll使用python调用dll的方法
2014/01/20 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
python远程邮件控制电脑升级版
2019/05/23 Python
解决Python3下map函数的显示问题
2019/12/04 Python
使用python计算三角形的斜边例子
2020/04/15 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
以下的初始化有什么区别
2013/12/16 面试题
写好自荐信要注意的问题
2013/11/10 职场文书
内业资料员岗位职责
2014/01/04 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
会计岗位职责模板
2014/03/12 职场文书
设计大赛策划方案
2014/06/13 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
中班上学期个人总结
2015/02/12 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书