使用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 ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
Webpack的Loader和Plugin的区别
Nov 09 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
jquery异步请求实例代码
2011/06/21 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
深入理解node.js http模块
2018/01/24 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
Python 的类、继承和多态详解
2017/07/16 Python
Python类装饰器实现方法详解
2018/12/21 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
社会治安综合治理责任书
2015/01/29 职场文书
大学毕业生个人总结
2015/02/28 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
Python如何用re模块实现简易tokenizer
2022/05/02 Python