使用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 15 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 Javascript
html实现随机点名器的示例代码
Apr 02 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
PHP也可以?成Shell Script
2006/10/09 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
php异常处理使用示例
2014/02/25 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
smarty模板数学运算示例
2016/12/11 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
详解Python中的相对导入和绝对导入
2017/01/06 Python
python编程实现归并排序
2017/04/14 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
大学生冰淇淋店商业计划书
2014/01/14 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
秘书英文求职信范文
2014/01/31 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
英语教学随笔感言
2014/02/20 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
最新离婚协议书范本
2014/08/19 职场文书
党员个人对照检查材料
2014/10/01 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
介绍信范文
2015/01/31 职场文书
爱国教育主题班会
2015/08/14 职场文书
社区结对共建协议书
2016/03/23 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript