使用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 开发中规范性的一点感想
Jun 23 Javascript
理解Javascript_08_函数对象
Oct 15 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
详解webpack 多入口配置
Jun 16 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
php通过session防url攻击方法
2014/12/10 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
python对于requests的封装方法详解
2019/01/03 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
淘宝店铺营销方案
2014/02/13 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
个人债务授权委托书
2014/10/17 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
汇报材料怎么写
2014/12/30 职场文书
毕业实习感受与体会
2015/05/26 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL