layui的form的学习笔记

最新推荐文章于 2024-04-27 01:00:51 发布
最新推荐文章于 2024-04-27 01:00:51 发布
阅读量410 收藏
点赞数
分类专栏： 学习笔记 文章标签： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZhangShuiShou/article/details/109954715
版权

Layui学习笔记-form

form模块的加载

自己在使用Layui进行fom表单的使用时，发现只有input文本框可以进行正常的显示出来，select、checkbox和radio都不能进行正常的展示，后来查了下官方文档（遇到问题查官方文档很多都能解决），自己只进行了layui的css、js的文件的引入，没有对form模块进行加载，调用 render(type, filter) (引用的js文件为layui.all.js时需要执行这个方法，引入的为layui.js加载form模块即可)后就可以正常显示form表单的所有的元素了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layui-form</title>
    <link rel="stylesheet" href="js/layui/layui/css/layui.css">
    <script rel="script" src="js/layui/layui/layui.all.js"></script>
</head>
<body>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">输入框：</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</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-block">
                <input type="checkbox" name="like[write]" title="写作">
                <input type="checkbox" name="like[read]" title="阅读" checked>
                <input type="checkbox" name="like[dai]" title="发呆">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block">
                <input type="checkbox" name="switch" lay-skin="switch">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</body>
</html>

layui的表达未使用form模块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layui-form</title>
    <link rel="stylesheet" href="js/layui/layui/css/layui.css">
    <script rel="script" src="js/layui/layui/layui.all.js"></script>
</head>
<body>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">输入框：</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</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-block">
                <input type="checkbox" name="like[write]" title="写作">
                <input type="checkbox" name="like[read]" title="阅读" checked>
                <input type="checkbox" name="like[dai]" title="发呆">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block">
                <input type="checkbox" name="switch" lay-skin="switch">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</body>
<script>
	//进行layui的form模块进行加载
    layui.use('form', function () {
        var form = layui.form;
        form.render(); // 更新全部
    })
</script>
</html>

layui的form表达加载form模块

ZhangShuiShou
关注
专栏目录
【前端】layui前端框架学习笔记，2024年最新大厂hr面试问题
m0_60707660的博客
04-18 733
yyyy-MM-dd通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下格式符说明yyyy年份，至少四位数。如果不足四位，则前面补零y年份，不限制位数，即不管年份多少位，前面均不补零MM月份，至少两位数。如果不足两位，则前面补零。M月份，允许一位数。dd日期，至少两位数。如果不足两位，则前面补零。d日期，允许一位数。HH小时，至少两位数。如果不足两位，则前面补零。H小时，允许一位数。mm分钟，至少两位数。
Layui学习笔记
计算机源码之家的博客
10-05 381
Layui目录 Layui目录Layui目录一、概述1. 下载2.下载文件说明二、内容1. 图标2. 按钮3. 导航菜单4. 选项卡5. 进度条6. 面板+布局7. 徽章8. 时间线9. 动画10. 颜色选择器11. 滑块12. 评分13. 轮播14. 代码修饰器15. 时间和日期选择器16. 表单元素17. 表单对象form18. 弹出层【重点】19. 数据表格【重点】20. 数据表格+弹出层的综合案例【重点】21. 文件上传22. 树形组件dtree三、使用方法3.1图标3.2按钮3.3事件监听3.4导
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-form
code袁的博客
12-31 2301
layui-form 1.单行排列 <div class="layui-form-item"> <label class="layui-form-label">姓名:</label> <div class="layui-input-block"> <!--layui-input-block 块级元素 --> <input type="text" name="title" required lay-verify="
LayUI中的内置模块之 表单模块 layui.form
daimeijin的博客
08-14 4626
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 表单模块文档 - layui.form 我们通常会在最常用的模块上耗费更多的精力，用尽可能简单的方式诠释 layui 所带来的便捷性。显而易见，form 是我们非常看重的一块。于是它试图用一贯极简的
layui总结(一) Layui-form
qq_45809464的博客
03-01 2955
layui总结(一) Layui-form 代码框架 表单样式 监听事件
layui表单 -- form元素
OpenSource_的博客
08-05 1727
form表单元素包括：text 文本输入框，password密码输入框，checkbox复选框，radio单选框，file 文件域，submit表单提交action指向的文件，reset表单清空，image图片提交按钮，button按钮，hidden隐藏域。 select option select 实现下拉选 callback 是回调函数 layui.模块 模块可以是layui已经存在的模块，也可以通过layui.define([mods], callback) 来自己自定义模块。 如果想要使.
【学习笔记】前端框架LayUI.pdf
09-13
,form = layui.form; layer.msg('Hello World'); }); ``` 在上面的示例代码中，我们首先引入了LayUI的CSS文件，然后引入了LayUI的JS文件，最后使用LayUI的layer弹出层组件弹出一个提示信息。 5. LayUI的...
Layui学习笔记，隔壁都馋哭了
m0_64384202的博客
12-07 1625
添加一个Tab 切换用户管理 删除商品管理 删除所有tab 简单风格的Tab 网站设置 用户管理 权限分配 商品管理 订单管理 高度默认自适应，也可以随意固宽。 2. Tab进行了响应式处理，所以无需担心数量多少。 内容2 内容3 内容4 内容5 卡片风格的Tab 网站设置 用户管理 权限分配 商品管理 订单管理 高度默认自适应，也可以随意固宽。 2. Tab进行了响应式处理，所以无需担心数量多少。 内容2 内容3 内容4 内容5 3.6进度条 ..
layui框架简单解读，为什么要使用layui框架，layui框架的好处，后端程序员快速学习掌握layui框架技术型文档博文，layui学习笔记，快速掌握前端技术框架
最新发布
2401_84446882的博客
04-27 1060
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
layui实现form表单同时提交数据和文件的代码
10-16
今天小编就为大家分享一篇layui实现form表单同时提交数据和文件的代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
dynamic-form.zip
05-18
layui使用数据表格与表单实现动态表单 的demo
Layui-form表单
FortyPigs的博客
11-11 274
1:官网打出小案例 2:对比小案例和要做的表单视图 3:做复制，删除，修改 4:重复做2，3步，直到做完 今日任务： from：内置模块----lay-verify=“required” 必须的 邮箱：required lay-verify=“email” 加**号：< span style=“color: red;”>< /span> ----- &...
layui 横向表单_Layui form 表单(常用)
weixin_42165980的博客
12-30 1689
form依赖模块formlayui-form div.layui-form-item label.layui-form-label div.layui-input-blockinput.layui-input lay-verify="required"image.png输入框密码框辅助文字选择框北京上海广州深圳杭州复选框开关单选框文本域立即提交重置//Demolayui.use('form'...
layui.form的理解
Lzfnemo2009的博客
02-27 4140
<form class="layui-form"></form> 1.class="layui-form",加上这个class，layui就会认为他是一个form表单，即使把form标签换成其他的元素 <div class="layui-form-item"> <label class="layui-form-label">输入框</label> <div class="layui-input-block"> .
layui快速学习（一）form表单元素
热门推荐
程序员XW
10-13 3万+
form表单元素包括：text 文本输入框，password密码输入框，checkbox复选框，radio单选框，file 文件域，submit表单提交action指向的文件，reset表单清空，image图片提交按钮，button按钮，hidden隐藏域。 select option select 实现下拉选 callback 是回调函数 layui.模块   模块可以是layui已经存在...
layui form 表单字体优化
成长中de大神
08-10 4675
layui 在layui.css 文件末尾 添加 layui-input{color:#FF7F24;font-size: 18px;width:150px;} 表单字体会更好看
【layui-表单模块 layui.form学习】
qq_48968230的博客
07-10 1211
有关layui-form模块文档内容的学习
Layui form与后端交互
z60015260的博客
06-14 6956
1.Layui 表单-form type-value对应值属性复选框；加参数lay-skin:"primary" 原始风格lay-skin:"switch" 开关风格，lay-text="开启|关闭" 开关风格设置文本内容layui字段2.Layui 选择框 lay-search 开启搜索匹配功能 value="" 预留“请选择”的提示空间 disabled 禁用选择 selected 默认选择项
layui form submit
04-29
layui form submit是一种基于layui框架的表单提交方式。该方式通过使用layui的form模块，可以实现快速、简便地提交表单数据。使用layui form submit可以有效地提高前端开发效率，实现更加灵活的表单提交功能。 使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值