使用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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
jquery ajax分页插件的简单实现
Jan 27 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
小程序关于请求同步的总结
May 05 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
基于JavaScript实现省市联动效果
Jun 22 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中explode与split的区别介绍
2012/10/03 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
python脚本实现验证码识别
2018/06/07 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
在keras中实现查看其训练loss值
2020/06/16 Python
python实现批处理文件
2020/07/28 Python
Python打印不合法的文件名
2020/07/31 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
MySQL面试题目集锦
2016/04/14 面试题
学生评语大全
2014/04/18 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
php引用传递
2021/04/01 PHP
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python