使用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学习资源站点
Aug 29 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
JavaScript实现拖拽功能
Feb 11 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连mysql和oracle数据库性能比较
2006/10/09 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
Django实现组合搜索的方法示例
2018/01/23 Python
Python subprocess模块详细解读
2018/01/29 Python
python实现zabbix发送短信脚本
2018/09/17 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
博士生导师推荐信
2014/07/08 职场文书
日语系毕业求职信
2014/07/27 职场文书
法人委托书
2014/07/31 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
python中tkinter复选框使用操作
2021/11/11 Python