使用layer弹窗提交表单时判断表单是否输入为空的例子


Posted in Javascript onSeptember 26, 2019

获得 layer 文件包后,解压并将 layer 整个文件夹(不要拆分结构) 存放到你项目的任意目录,使用时,只需引入 layer.js 即可

使用时一定他要先引入jq1.8,或者以上版本!!!

下面是提交表单的实列

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <title></title>
 <script src="__STATIC__/js/mui.min.js"></script>
 <link href="__STATIC__/css/mui.min.css" rel="external nofollow" rel="stylesheet"/>
 <script src="__STATIC__/layer/jquery-2.2.4.min.js"></script>
 <script src="__STATIC__/layer/layer.js"></script>
 <script type="text/javascript" charset="utf-8">
  mui.init();
 </script>
</head>
<body>
  
  <center>
    <ul class="mui-table-view">
    <li class="mui-table-view-cell">商品入库</li>
    </ul>
  </center>
  
<form action="{:url('order')}" method="post" class="mui-input-group">
 <div class="mui-input-row">
  <label>商品单号:</label>
 <input type="text" class="mui-input-clear" placeholder=" 请输入用户名" name="order" id="order">
 </div>
  <div class="mui-input-row">
    <label>商品名称:</label>
  <input type="text" class="mui-input-clear" placeholder=" 请输入用户名" name="name" id="name">
  </div>
  <div class="mui-input-row">
    <label>商品单价:</label>
  <input type="text" class="mui-input-clear" placeholder=" 请输入用户名" name="money" id="money">
  </div>
  <div class="mui-input-row">
    <label>商品库存:</label>
  <input type="text" class="mui-input-clear" placeholder=" 请输入用户名" name="stock" id="stock">
  </div>
  <div class="mui-input-row">
    <label>商品备注:</label>
    <input type="text" class="mui-input-clear" placeholder=" 请输入密码" name="remarks" id="remarks">
  </div>
 <div class="mui-button-row">
  <button type="submit" class="mui-btn mui-btn-primary" id="cx">确认</button>
 </div>
  
</form>
<script type="text/javascript">
 $(document).ready(function(){
  $('#cx').click(function(){ 
   var $1 = $.trim($('#order').val());
   var $2 = $.trim($("#name").val());
   var $3 = $.trim($("#money").val());
   var $4 = $.trim($("#stock").val());
   var $5 = $.trim($("#remarks").val()); 
   if($1 == ''){ 
    layer.msg('商品单号不能为空',function() {time:2000}); 
    return false; 
   }
   if($2 == ''){ 
    layer.msg('请输入商品名称!',function() {time:2000});
    return false; 
   }
   if($3 == ''){ 
    layer.msg('请输入商品单价!',function() {time:2000});
    return false; 
   }
   if($4 == ''){ 
    layer.msg('请输入商品库存!',function() {time:2000});
    return false; 
   }
   
  }); 
 });
</script>
</body>
</html>

以上这篇使用layer弹窗提交表单时判断表单是否输入为空的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
vue下的@change事件的实现
Oct 25 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 Javascript
vue 中使用print.js导出pdf操作
Nov 13 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
vue源码中的检测方法的实现
Sep 26 #Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 #Javascript
You might like
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
php array的学习笔记
2012/05/10 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
JS重要知识点小结
2011/11/06 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
wxpython学习笔记(推荐查看)
2014/06/09 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
20个常用Python运维库和模块
2018/02/12 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
Python理解递归的方法总结
2019/01/28 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
如何使用python传入不确定个数参数
2020/02/18 Python
python实例化对象的具体方法
2020/06/17 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
把富文本的回车转为br标签
2019/08/09 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
SQL Server数据库笔试题和答案
2016/02/04 面试题
大堂副理的岗位职责范文
2014/02/17 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏