使用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 相关文章推荐
javascript xml为数据源的下拉框控件
Jul 07 Javascript
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
javascript制作2048游戏
Mar 30 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
js实现左右轮播图
Jan 09 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 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
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
vue实现简单图片上传
2020/06/30 Javascript
Vue的Options用法说明
2020/08/14 Javascript
Python算法之栈(stack)的实现
2014/08/18 Python
Python读写文件方法总结
2015/06/09 Python
Python中的getopt函数使用详解
2015/07/28 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
新员工入职感言
2014/02/01 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
运动会跳远广播稿
2015/08/19 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js