表单 - 页面元素

最新推荐文章于 2024-08-11 15:42:10 发布
最新推荐文章于 2024-08-11 15:42:10 发布
阅读量5k 收藏 3
点赞数
分类专栏： layui插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haibo0668/article/details/52932245
版权

表单 - 页面元素


四大要素：


一、要引用文件：（当然了，看你会用到那个模块，我是全部引用，然后什么都可以直接使用）

<script src="layui/layui.js"></script>
<script src="layui/lay/dest/layui.all.js"></script> 
<link rel="stylesheet" href="layui/css/layui.css">


二、表单样式一定有：

    <form class="layui-form" action="">


三、一要定判断JS（无论要不要判断，不然样式出不来）

<script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form()
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
 
  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
    ,pass: [/(.+){6,12}$/, '密码必须6到12位']
  });
  
  //创建一个编辑器
  layedit.build('LAY_demo_editor');
  
  //监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
  
 
});
</script>


四、提交方式

       代码：

                              <button class="layui-btn" lay-filter="demo2" lay-submit="">跳转式提交</button>
                              <button class="layui-btn" lay-filter="demo1" lay-submit="">立即提交</button>



          1、转跳式提交方式（就是正常的提交方式，PHP、ASP等程序比较容易直接取得值）

             http://www.xxxxx.com/feedback.php?title=212122121&sex=%E7%94%B7&file=

           2、立即提交方式（通过JS，JSON,Ajax获取 ）

            



正常情况下



问题：


文件引用了

<script src="layui/layui.js"></script>
<script src="layui/lay/dest/layui.all.js"></script> 
<link rel="stylesheet" href="layui/css/layui.css"> 

但是还是出现下面这种情况




这是因为还要引用判断JS才行

<script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form()
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
 
  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
    ,pass: [/(.+){6,12}$/, '密码必须6到12位']
  });
  
  //创建一个编辑器
  layedit.build('LAY_demo_editor');
  
  //监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
  
 
});
</script>



完整一个DEMO代码 

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="//res.layui.com/layui/build/css/layui.css"  media="all">
</head>
<body>
              
<fieldset class="layui-elem-field layui-field-title">
  <legend>响应式的表单集合</legend>
</fieldset>
 
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">单行输入框</label>
    <div class="layui-input-block">
      <input name="title" class="layui-input" type="text" placeholder="请输入标题" autocomplete="off" lay-verify="title">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">验证必填项</label>
    <div class="layui-input-block">
      <input name="username" class="layui-input" type="text" placeholder="请输入" autocomplete="off" lay-verify="required">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">验证手机</label>
    <div class="layui-input-inline">
      <input name="phone" class="layui-input" type="tel" autocomplete="off" lay-verify="phone">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">验证邮箱</label>
    <div class="layui-input-inline">
      <input name="email" class="layui-input" type="text" autocomplete="off" lay-verify="email">
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">验证数字</label>
      <div class="layui-input-inline">
        <input name="number" class="layui-input" type="number" autocomplete="off" lay-verify="number">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">验证日期</label>
      <div class="layui-input-block">
        <input name="date" class="layui-input" id="date" οnclick="layui.laydate({elem: this})" type="text" placeholder="yyyy-mm-dd" autocomplete="off" lay-verify="date">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">验证链接</label>
      <div class="layui-input-block">
        <input name="url" class="layui-input" type="tel" autocomplete="off" lay-verify="url">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">验证身份证</label>
    <div class="layui-input-block">
      <input name="identity" class="layui-input" type="text" placeholder="" autocomplete="off" lay-verify="identity">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">自定义验证</label>
    <div class="layui-input-inline">
      <input name="password" class="layui-input" type="password" placeholder="请输入密码" autocomplete="off" lay-verify="pass">
    </div>
    <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">范围</label>
      <div class="layui-input-inline" style="width: 100px;">
        <input name="price_min" class="layui-input" type="text" placeholder="￥" autocomplete="off">
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline" style="width: 100px;">
        <input name="price_max" class="layui-input" type="text" placeholder="￥" autocomplete="off">
      </div>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">单行选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value=""></option>
        <option value="0">写作</option>
        <option value="1" selected="">阅读</option>
        <option value="2">游戏</option>
        <option value="3">音乐</option>
        <option value="4">旅行</option>
      </select>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">行内选择框</label>
    <div class="layui-input-inline">
      <select name="quiz">
        <option value="">请选择省</option>
        <option value="浙江" selected="">浙江省</option>
        <option value="你的工号">江西省</option>
        <option value="你最喜欢的老师">福建省</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="quiz">
        <option value="">请选择市</option>
        <option value="杭州">杭州</option>
        <option value="宁波">宁波</option>
        <option value="温州">温州</option>
        <option value="温州">台州</option>
        <option value="温州">绍兴</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="quiz">
        <option value="">请选择县/区</option>
        <option value="西湖区">西湖区</option>
        <option value="余杭区">余杭区</option>
        <option value="拱墅区">临安市</option>
      </select>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input name="like[write]" title="写作" type="checkbox">
      <input name="like[read]" title="阅读" type="checkbox" checked="">
      <input name="like[game]" title="游戏" type="checkbox">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关-关</label>
    <div class="layui-input-block">
      <input name="close" title="开关" type="checkbox" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关-开</label>
    <div class="layui-input-block">
      <input name="open" title="开关" type="checkbox" checked="" lay-filter="switchTest" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input name="sex" title="男" type="radio" checked="" value="男">
      <input name="sex" title="女" type="radio" value="女">
      <input name="sex" title="保密" type="radio" value="密">
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">普通文本域</label>
    <div class="layui-input-block">
      <textarea class="layui-textarea" placeholder="请输入内容">请输入内容</textarea>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">编辑器</label>
    <div class="layui-input-block">
      <textarea class="layui-textarea layui-hide" id="LAY_demo_editor"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-filter="demo1" lay-submit="">立即提交</button>
      <button class="layui-btn layui-btn-primary" type="reset">重置</button>
    </div>
  </div>
</form>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>方框风格的表单集合</legend>
</fieldset>
<form class="layui-form layui-form-pane" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">长输入框</label>
    <div class="layui-input-block">
      <input name="title" class="layui-input" type="text" placeholder="请输入标题" autocomplete="off">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">短输入框</label>
    <div class="layui-input-inline">
      <input name="username" class="layui-input" type="text" placeholder="请输入" autocomplete="off" lay-verify="required">
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">日期选择</label>
      <div class="layui-input-block">
        <input name="date" class="layui-input" id="date" οnclick="layui.laydate({elem: this})" type="text" autocomplete="off">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">行内表单</label>
      <div class="layui-input-inline">
        <input name="number" class="layui-input" type="number" autocomplete="off">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
      <input name="password" class="layui-input" type="password" placeholder="请输入密码" autocomplete="off">
    </div>
    <div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">范围</label>
      <div class="layui-input-inline" style="width: 100px;">
        <input name="price_min" class="layui-input" type="text" placeholder="￥" autocomplete="off">
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline" style="width: 100px;">
        <input name="price_max" class="layui-input" type="text" placeholder="￥" autocomplete="off">
      </div>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">单行选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value=""></option>
        <option value="0">写作</option>
        <option value="1" selected="">阅读</option>
        <option value="2">游戏</option>
        <option value="3">音乐</option>
        <option value="4">旅行</option>
      </select>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">行内选择框</label>
    <div class="layui-input-inline">
      <select name="quiz">
        <option value="">请选择省</option>
        <option value="浙江" selected="">浙江省</option>
        <option value="你的工号">江西省</option>
        <option value="你最喜欢的老师">福建省</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="quiz">
        <option value="">请选择市</option>
        <option value="杭州">杭州</option>
        <option value="宁波">宁波</option>
        <option value="温州">温州</option>
        <option value="温州">台州</option>
        <option value="温州">绍兴</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="quiz">
        <option value="">请选择县/区</option>
        <option value="西湖区">西湖区</option>
        <option value="余杭区">余杭区</option>
        <option value="拱墅区">临安市</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea class="layui-textarea" placeholder="请输入内容">请输入内容</textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <button class="layui-btn" lay-filter="demo2" lay-submit="">跳转式提交</button>
  </div>
</form>
          
<script src="//res.layui.com/layui/build/layui.js" charset="utf-8"></script>
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form()
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
 
  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
    ,pass: [/(.+){6,12}$/, '密码必须6到12位']
  });
  
  //创建一个编辑器
  layedit.build('LAY_demo_editor');
  
  //监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
  
  
});
</script>

</body>
</html>





我是高手高手高高手
关注
专栏目录
【HTML5】表单&表单元素（持续更新中.....）
qq_45152044的博客
11-12 2800
表单概述 什么是表单 Web网页在的表单一般用来做网络调查、用户在线注册、信息检索及网站服务提供商向用户采集信息等。表单是较为复杂的HTML元素，经常与脚本、动态网页、后台数据处理等结合在一起使用，是设计动态网页的必备元素。利用表单可以在HTML页面中插入一些表单控件（元素），如文本框、提交按钮、重置按钮、单选按钮、复选框、下拉列表框等，完成各类信息的采集。 表单标记 表单标记：form标记，以<form>开始，以</form>结束。 表单定义了采集数据的范围，其所包含的数据内容将被
layui的基础使用
卑微的码农
09-01 970
//获取项目url var ctx = '${pageContext.request.contextPath}'; var transferYK; var layerYK; var utilYK; var formYK; layui.use(['transfer', 'layer', 'util','form'], function(){ transferYK = layui.transfer; layerYK = l...
Layui——实现弹出层中的form表单验证（lay-verify不生效）
最新发布
戏拈秃笔的博客
08-11 727
​弹出层的表单验证和普通的表单验证不同，弹出层的表单验证使用的是弹出层的提交按钮，而该按钮并没有和lay-verify绑定，也就无法触发表单验证。 实现思路就是在弹出层form表单页面中设置一个隐藏的提交按钮，然后在layer弹出层点击“确定”按钮时，找到form表单中隐藏的提交按钮，触发点击事件，即可实现验证功能。
layui前端框架的基本使用方法
月与清酒的博客
01-04 3243
镜像站@Layui - 经典开源模块化前端 UI 框架 (gitee.io)https://lh_yun.gitee.io/layui/www.layui.com/index.html 由于layui已经下架，所以在这里我们可以通过镜像站来访问到layui的主页 目录 1.layui的使用 2.布局容器 3.栅格系统 4.表单和按钮 5.选项卡 6.表格 7.面板 8.时间线 9.弹出层 10.数据表格 1.layui的使用 要想...
layui学习
qq_58148854的博客
11-12 1183
layui是一个前端UI框架。主要是配合JQuery使用。引用文件 引用文件 <link rel="stylesheet" href="./plugins/layui/css/layui.css" type="text/css"> <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script> <!-- 可加自己的jquery --> <scr.
Layui之表单form
weixin_44570988的博客
10-28 1243
代码以及效果图 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/common/common.jsp"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
离开页面时检测表单元素是否被修改,提示保存的js代码
10-28
"离开页面时检测表单元素是否被修改,提示保存的js代码"这个功能就是为了确保用户不会意外丢失他们的改动。当用户在表单上进行编辑后试图离开页面时，系统会弹出一个提示，询问他们是否确认离开，这样可以防止用户...
使用CSS控制表单-制作会员注册页面.pdf
11-16
通过本节课的学习，学生不仅能够理解会员注册页面和登录页面的设计要求，还能掌握CSS在控制表单方面的应用，为成为专业的电子商务网页设计师奠定基础。同时，课程还注重培养学生的法律意识，了解相关法律法规，以...
jquery 表单下所有元素的隐藏
10-29
在处理Web表单时，我们经常会遇到需要隐藏表单内所有输入元素的场景，比如制作模态对话框、表单验证、用户交互引导等。 根据给定的文件信息，我们将探讨如何使用jQuery来隐藏一个表单内所有元素的方法，而无需添加...
vertical-align 表单元素垂直对齐的解决方法
12-11
在很多网站涉及到表单的页面中，都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。首先，搜索到了wheatlee前辈的文章《大家都对vertical-align的各说各话》。wheatlee在他的文章中关于垂直...
使用json数据生成表单页面
08-10
在Web开发中，动态生成表单页面是一种常见的需求，特别是在数据驱动的应用中。"使用json数据生成表单页面"这个主题就是围绕这一需求展开的。它涉及到的主要技术是JavaScript，特别是利用JSON（JavaScript Object ...
LayuiForm表单.txt
12-10
form表单元素包括：text 文本输入框，password密码输入框，checkbox复选框，radio单选框，file 文件域，submit表单提交action指向的文件，reset表单清空，image图片提交按钮，button按钮，hidden隐藏域。 select option select 实现下拉选 callback 是回调函数 layui.模块   模块可以是layui已经存在的模块，也可以通过layui.define([mods], callback) 来自己自定义模块。 如果想要使用模块首先要做的必然是加载模块，layui.use(['laypage', 'layedit'], function(){}); 接下来使用layui风格控件  其实感觉layui帮我们定义好了CSS和许多JS文本，我们需要做的只是按照layui的命名规范选好样式进而使用就可以了。  layu官方文档的命名规范为： CSS命名规范 class命名前缀：layui，连接符：-，如：class="layui-form" 命名格式一般分为两种： 一：layui-模块名-状态或类型 二：layui-状态或类型 因为有些类并非是某个模块所特有，他们通常会是一些公共类。如： 一（定义按钮的原始风格）：class="layui-btnlayui-btn-primary" 二（定义内联块状元素）：class="layui-inline" 1 2 3 4 5 6 7 8 9 当然还有前面提到的使用模块的js代码： layui.use(['form', 'layedit', 'laydate'], function(){   var form = layui.form   ,layer = layui.layer   ,layedit = layui.layedit   ,laydate = layui.laydate;   //日期   laydate.render({     elem: '#date'   });   laydate.render({     elem: '#date1'   });   //创建一个编辑器   var editIndex = layedit.build('LAY_demo_editor');   //自定义验证规则   form.verify({     title: function(value){       if(value.length < 5){         return '标题至少得5个字符啊';       }     }     ,pass: [/(.+){6,12}$/, '密码必须6到12位']     ,content: function(value){       layedit.sync(editIndex);     }   });   //监听指定开关   form.on('switch(switchTest)', function(data){     layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {       offset: '6px'     });     layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)   });   //监听提交   form.on('submit(demo1)', function(data){     layer.alert(JSON.stringify(data.field), {       title: '最终的提交信息'     })     return false;   }); }); 下面我们按照官方文档的开发规范使用一下form表单的例子       表单集合演示           单行输入框                       验证必填项                             验证手机                                   验证邮箱                                       多规则验证                                   验证日期                                   验证链接                                 验证身份证                       自定义验证                   请填写6到12位密码               范围                           -                                 单行选择框                   </opt
以页面模块(模块定义)为添加单位的DNN控制窗格（ControlPanel）
weixin_33958366的博客
08-08 158
我在《DNN数据库核心表结构及设计思路探研 》一文中说，DNN模块的添加实际上加的是一个桌面模块，当被添加的桌面模块不只一个模块定义时，添加后就产生好几个页面模块，即一个模块定义一为一个模块。为了添加模块以页面模块为单位，特将classic.ascx将作了部分修改，让他达到这样的目的。将在，模块右边添加一个Definition下拉框，当模块选了后，就在模块定义下拉框显示些桌面模块的所有模块定义，添...
layUI使用中的一些心得
12-03 2557
目前出现过的一些问题： 1. layui中输入框较短或过长 layui中提供了表单两种形式的长度，分别为 <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">单行输入框</label> ...
【Layui】layui 单选框、多选框radio 元素判断是必填项 lay-verify=‘required‘
德仔
12-29 3721
/,verifyElem=formElem.find('input[name='+verifyName+']')//获取需要校验的元素。//获取当前所在的form元素，如果存在的话。大家好，又见面了，我是你们的朋友全栈君。简单验证复选框，单选框必填。//获取需要校验的元素。//对非输入框设置焦点。
关于layui中lay-verify="required"无效的解决办法
热门推荐
mengsong的博客
12-14 1万+
解决lay-verify="required"无效的两种解决办法 1.所有的表单元素必须要在<form class="layui-form" >表单中，注意class必须为layui-form。 2.<form>中不能包含其他的<form>，否则也会失效 ...
layui lay-verify 验证
Mjl_666的博客
04-22 1516
layui lay-verify 验证 html代码 <input type="text" lay-verify="required" > js代码 layui.use(['form', 'layer'], function () { var form = layui.form(), layer = layui.layer; //验证 form.verify(verify); form.on('submit(submit)', function
Layui表单验证lay-verify属性：自定义校验
Seanliuo
11-17 6805
Layui表单验证lay-verify属性 layui官网：https://www.layui.com/doc/modules/form.html#verify(自定义验证) layui 表单自带校验： lay-verify：是表单验证的关键字 有以下值供选择： required (该输入框必填项) phone（手机号） email（邮箱） url（网址） number（数字） date（日期） identity(身份证) 自定义值 同时支持多条规则的验证： 格式：lay-verify=”验证A|验证B”
使用laydate选择时间范围
shabulaji_123的博客
06-21 1万+
在进行时间选择范围上面，有时候会有限定的时间，比如时间上限和时间下下限，这里采用layui的laydate方法layui.use(['form', 'laydate', 'upload', 'layer'], function () { var form = layui.form, upload = layui.upload, laydate = layui...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值