使用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判断非数字的简单例子
Jul 18 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
js实现随机数小游戏
Jun 28 Javascript
用vue设计一个日历表
Dec 03 Vue.js
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生成二维码的两种方法(带logo图像)
2014/03/14 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
VueJs组件之父子通讯的方式
2018/05/06 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
详解Python的Django框架中的模版相关知识
2015/07/15 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
python实现浪漫的烟花秀
2019/01/30 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
建筑班组长岗位职责
2014/01/02 职场文书
母亲80寿诞答谢词
2014/01/16 职场文书
学生期末评语大全
2014/04/30 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
个人查摆剖析材料
2014/10/04 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
商务司机岗位职责
2015/04/10 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书