使用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 相关文章推荐
JScript的条件编译
May 29 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
JavaScript中操作字符串小结
May 04 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 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 格式化数字的时候注意数字的范围
2010/04/13 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
js实现图片轮播效果
2015/12/19 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
python3实现逐字输出的方法
2019/01/23 Python
Python中dict和set的用法讲解
2019/03/28 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
《跨越百年的美丽》教学反思
2014/02/11 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
干部考察材料范文
2014/12/24 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
学校运动会感想
2015/08/10 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server