layui实现表单

最新推荐文章于 2025-04-07 17:09:41 发布
最新推荐文章于 2025-04-07 17:09:41 发布
阅读量512 收藏
点赞数
分类专栏： layui jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LHH201016/article/details/119348957
版权
这个示例展示了如何使用layui库来创建和验证HTML表单。包括单行输入框、必填项验证、手机号和邮箱验证、多规则验证、日期验证、身份证验证、自定义密码验证、范围验证、单选和多选框、搜索和联动选择框等功能。通过layui的lay-verify属性进行各种类型的验证，并提供了提交按钮和重置按钮。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <!-- 要是用layui，需要引入1个js，一个css -->

    <script src="layui-v2.5.6/layui/layui.js"></script>

    <link rel="stylesheet" href="layui-v2.5.6/layui/css/layui.css">

</head>

<body>

    

    <div>

        <form class="layui-form" action="" οnsubmit="return false">

          <div class="layui-form-item">

            <label class="layui-form-label">单行输入框</label>

            <div class="layui-input-block">

              <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">

            </div>

          </div>

          <div class="layui-form-item">

            <label class="layui-form-label">验证必填项</label>

            <div class="layui-input-block">

              <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">

            </div>

          </div>

          

          <div class="layui-form-item">

            <div class="layui-inline">

              <label class="layui-form-label">验证手机</label>

              <div class="layui-input-inline">

                <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">

              </div>

            </div>

            <div class="layui-inline">

              <label class="layui-form-label">验证邮箱</label>

              <div class="layui-input-inline">

                <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">

              </div>

            </div>

          </div>

          

          <div class="layui-form-item">

            <div class="layui-inline">

              <label class="layui-form-label">多规则验证</label>

              <div class="layui-input-inline">

                <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">

              </div>

            </div>

            <div class="layui-inline">

              <label class="layui-form-label">验证日期</label>

              <div class="layui-input-inline">

                <input type&

最低0.47元/天 解锁文章
layui多个file与提交同时进行_layui 实现表单和文件上传一起传到后台的例子
weixin_30478241的博客
12-31 1415
HTML代码尾灯名称上传图标 立即提交JavaScript代码layui.use(['form', 'layer', 'upload'], function () {var layer = layui.layer;var upload = layui.upload;var $ = layui.jquery;upload.render({elem: '#upload',url: '{...
Layui表格构建
weixin_47257048的博客
08-18 291
开发工具与关键技术： Visual Studio 2015与layui 作者： 驴骡咚咚锵 撰写时间：2020.8.17 Layui表格构建 正文 由于在浏览网页的时候，我们有时候需要查看某些数据，这时候，部分数据由表格形式呈现出来，下面我们就来学习怎么用layui制作一个表格. 它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，
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
layui-表单
博客园: https://www.cnblogs.com/fger/
06-14 382
首先不管是单选框还是复选框或者是下拉框，都要在你写的标签外面套一层div或者是form标签，如： &amp;amp;lt;div class=”layui-input-block”&amp;amp;gt;&amp;amp;lt;input type=”radio” name=”sex” value=”0” title=”男”&amp;amp;gt;&amp;amp;l
layui——表单
yilia_jia的博客
10-23 700
&lt;form class="layui-form" action=""&gt; &lt;div class="layui-form-item"&gt; &lt;label class="layui-form-label"&gt;用户类型&lt;/label&gt; &lt;div class="layu
Layui-------表单篇
weixin_44394054的博客
01-23 542
导航，面包屑：https://www.layui.com/doc/element/nav.htm 进度条：https://www.layui.com/doc/element/progress.html 面板：https://www.layui.com/doc/element/panel.html 徽章
layui表单生成器-懒人专用
weixin_30642305的博客
11-21 2573
在线地址:https://9499574.github.io/layui-form-create/ 转载于:https://www.cnblogs.com/phper8/p/9996637.html
layui 实现表单和文件上传一起传到后台的例子
01-19
form class=layui-form> <div class=layui-form-item> <label class=layui-form-label>尾灯名称 <div class=layui-input-block> <input type=text name=name required lay-verify=required placeholder=请...
基于layui的表单设计器
03-25
《基于layui的表单设计器深度解析》 在Web应用开发领域，用户界面的构建往往是一项繁琐而关键的任务，尤其在处理复杂表单时。layui，一个轻量级、模块化的前端框架，因其丰富的组件和易用性，已经成为许多开发者的...
layui-表单(输入框)
weixin_46098612的博客
07-05 803
先写一个表单元素块 form 加上layui-form。
后台layui表单生成器代码复制即用，添加编辑一体，可条件判断
04-13
后台layui表单生成器代码复制即用，添加编辑一体，可条件判断 使用方式：放在服务器根目录访问域名+/tfForm/index.html使用本程序
layui的布局和表格的渲染以及动态生成表格的方法
10-16
今天小编就为大家分享一篇layui的布局和表格的渲染以及动态生成表格的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Layui框架实战基础(增删改查)表格表单(二)
m0_65607651的博客
06-25 1503
Layui框架实战基础(增删改查)表格表单(二) 快捷新增和修改等
layui表单实现
aqzengkuasheng的博客
02-28 635
表单输入框的实现 1.要引入layui中的核心css和js资源 <link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui-v2.5.6/layui/css/layui.css"/> <script src="layui-v2.5.6/layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script> 2.要有依
Layui表单功能
酸菜鱼的博客
06-09 363
开发工具与关键技术：VS+Layui 作者：茅凯翔 撰写时间：2019年6月9日 表单都是用输入信息或者资料，输入资料必不可少的。有输入框、有密码框、选择框、复选框、开关、单选框、文本域，这些都是基本需要用到的（开关好像不是基本需要用到的，那就不做介绍了哈）。可能还有别的，我就先介绍这些。 输入框：输入框只提供输入内容。用一个外层div元素，里面放名称（label标签），放什么名称都可以，自定...
Layui 12 Form 表单组件
最新发布
monian187的博客
04-07 1024
layui form 表单组件整合
LayUI+JavaScript生成动态表单及提交
-
08-29 9247
LayUI动态表单是在Vue+Element-UI动态表单生成及提交之前做的 LayUI效果如下： 引入需要的文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 引入JQuery --> <script type="t...
Layui 表单设计器
hjh_cos
06-27 2565
layui 的纯前端表单生成器，目前项目会持续更新
layui的表单与表格使用详解
热门推荐
马不腾的博客
04-16 1万+
一、开始前准备 到官网下载layui需要的文件 在html文件里面导入： <script src="../layui/layui.js"></script> <link rel="stylesheet" href="../layui/css/layui.css"> <link rel="stylesheet" href="../la...
layui实现表单添加明细表
12-27
### 使用Layui实现表单内嵌套表格并动态添加行 为了实现在表单中嵌入可以动态添加行的表格，可以通过结合`Layui`的数据表格组件(`table`)和自定义JavaScript逻辑来完成这一功能。下面提供了一个具体的实例说明如何创建这样的交互效果。 #### HTML结构设置 首先，在HTML页面上准备一个用于显示表格的容器，并为其指定唯一的ID以便后续通过JS操作： ```html <form class="layui-form"> <!-- 表头 --> <div class="layui-inline"> <label class="layui-form-label">主表字段</label> <div class="layui-input-block"> <input type="text" name="mainField" required lay-verify="required" placeholder="请输入..." autocomplete="off" class="layui-input"> </div> </div> <!-- 明细表部分 --> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>明细项</legend> <button type="button" class="layui-btn layui-btn-sm" onclick="addRow()">新增一行</button> <table id="detailTable" lay-filter="detailTable"></table> </fieldset> </form> ``` 此段代码构建了基本布局，其中包含了一个按钮用来触发增加新行的动作[^2]。 #### JavaScript初始化配置与事件处理函数编写 接下来是核心的部分——使用JavaScript配合Layui API来进行表格渲染及行为控制： ```javascript // 加载必要的模块 layui.use(['table'], function(){ var table = layui.table; // 渲染初始状态下的空白表格 table.render({ elem: '#detailTable' ,cols: [[ {field:'id', title: '序号', width:80, sort: true} ,{field:'materialCode', title: '物料编码'} ,{field:'quantity', title: '数量'} ,{fixed: 'right', title:'操作', toolbar:'#barDemo'} ]] ,data:[] ,page:false }); }); function addRow() { let index = (new Date()).valueOf(); // 创建唯一索引 layui.table.add('detailTable', [{ id : index, materialCode : '', quantity : '' }]); } // 定义工具栏点击事件监听器 document.addEventListener('DOMContentLoaded', () => { document.querySelector('#detailTable').addEventListener('click', e=> { if(e.target.tagName.toLowerCase()==='i'&&e.target.classList.contains('layui-icon-delete')){ const tr=e.path.find(el=>el.tagName==='TR'); const data=tr.getAttribute('data-index'); layui.table.delete('detailTable',[parseInt(data)]); } }); }); ``` 上述脚本实现了如下几个要点： - 初始化时调用了`render()`方法设置了表格的基本属性； - `addRow()` 函数负责向表格追加新的记录条目； - 添加了一组简单的删除图标作为每行的操作选项，并绑定了相应的移除动作[^3]。 请注意，这里展示的是简化版的例子，实际应用可能还需要考虑更多细节比如验证输入合法性、保存修改到服务器端等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值