使用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 相关文章推荐
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 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
PHP一些有意思的小区别
2006/12/06 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
vue axios请求拦截实例代码
2018/03/29 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
Python使用django获取用户IP地址的方法
2015/05/11 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
详解python数据结构和算法
2019/04/18 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
骨干教师培训感言
2014/01/16 职场文书
2015大学生求职信范文
2015/03/20 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android