使用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 相关文章推荐
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
express框架下使用session的方法
Jul 31 Javascript
Ant design vue中的联动选择取消操作
Oct 31 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 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 socket的讲解与实例分析
2013/06/13 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
在新窗口打开超链接的方法小结
2013/04/14 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
JSON相关知识汇总
2015/07/03 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
python查询sqlite数据表的方法
2015/05/08 Python
python中Apriori算法实现讲解
2017/12/10 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
自动化专业个人求职信范文
2013/12/30 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
公司安全管理制度范本
2015/08/05 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书