使用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 相关文章推荐
firefox插件Firebug的使用教程
Jan 02 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
微信小程序实现页面左右滑动
Nov 16 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设计模式 php实现模板方法模式
2015/12/08 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
mui框架移动开发初体验详解
2017/10/11 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
Python网络爬虫实例讲解
2016/04/28 Python
使用python实现个性化词云的方法
2017/06/16 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
Python中拆分字符串的操作方法
2019/07/23 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
董事长岗位职责
2013/11/30 职场文书
优秀民警事迹材料
2014/01/29 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
教师素质教育心得体会
2016/01/19 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
如何通过cmd 连接阿里云服务器
2022/04/18 Servers