layui框架学习(15:表单-中)
创始人
2025-05-30 18:51:27

  上一篇文件介绍了Layui中表单的大致结构,本文开始学习表单中与几种输入元素相关的layui样式和属性设置。表单中的输入元素包括文本框、下拉框、复选框、单选框等,本文结合Layui官网教程和官网示例,逐个学习与记录与之相关的layui样式和属性设置。
  input标签支持用户输入数据,同时通过type属性可以设置不同的输入类型,如text为文本框、email为电子邮件地址、tel为电话号码等,详细的type取值请见参考文献5。layui中使用预设类layui-input设置输入类型为文本的输入框的样式,其与普通文本框的样式区别如下所示:

在这里插入图片描述

	

  Layui中支持采用lay-verify属性设置文本框的验证方式,包括required(必填项)、phone(手机号)、email(邮箱)、url(网址)、number(数字)、date(日期)、identity(身份证)、自定义方式等,支持同时采用多种验证方式,只需使用"|"符号分隔即可。采用lay-verify验证输入内容格式,只用加载form模块,不需要编写额外的代码(自定义验证方式除外)。
在这里插入图片描述

   

  上述示例中的验证提示信息以提示框形式出现,layui中采用lay-verType属性设置提示信息的出现形式,主要包括tips(吸附层)、alert(对话框)、msg(默认),这三种形式的截图如下所示:
在这里插入图片描述
  layui中采用lay-reqText属性自定义提示信息,用以替换layui默认的提示信息:
在这里插入图片描述

  

  Layui官网教程的示例中出现的required (必需在提交表单之前填写输入字段)、placeholder(占位符)、autocompleteNew(是否应该启用自动完成功能)等属性属于HTML5中新增的属性,没有layui也能设置。

参考文献:
[1]B站:layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
[5]https://www.runoob.com/tags/att-input-type.html

相关内容

热门资讯

交换机概念和知识和命令 目录 一、华为交换机基础学习的一些重要概念和知识 二、交换机常用命令大全 三、不常用的交换机命令 ...
什么是 JavaScript ... 本文首发自「慕课网」,想了解更多IT干货内容,程序员圈内热闻࿰...
【C++】C++11——lam... 文章目录一、Lambda表达式引入二、Lambda表达式语法三、Lambda表达式交换两个值四、La...
Java分布式事务(十) 文章目录🔥分布式架构的理论知识_BASE理论🔥分布式事务解决方案_最...
vmware中centos7实... 前言 在开发收银系统SAAS版本时,采用的是centos服务器,经常需要...
计算机图形学 | 可编程渲染管... 计算机图形学 | 可编程渲染管线计算机图形学 | 可编程渲染管线3.1 从固定到可编程图形编程的发展...
linux下安装两个或多个to... 安装jdk,tomcat编辑环境变量profilevi /etc/profile加入以...
selenium的显示等待、隐... 关于selenium有三种等待方式,分别为显示等待、隐式等待、强制等待 1、强制等待 ...
测牛学堂:软件测试接口自动化之... requests库 用postman进行接口测试有一定的限制,我们测试更应该掌握的是用...
day36_jdbc 今日内容 上课同步视频:CuteN饕餮的个人空间_哔哩哔哩_bilibili 同步笔记沐沐霸的博客...
【java基础】Stream流... 文章目录基本介绍流的创建流的各种常见操作forEach方法filter方法map方法peek方法fl...
幂等性通用组件 一、什么是幂等性幂等是一个数学与计算机学概念,在数学中某一元运算为幂等时,...
Nacos服务注册 又是美好的一天呀~ 个人博客地址: huanghong.top 本文预估阅读时长为3...
令人惊艳的ChatGPT项目,... 自从 ChatGPT、Stable Diffusion 发布以来,各种相关开源项目百花...
舆情监测系统有哪些优势,TOO... 舆情监测系统是一种基于大数据技术的舆情分析工具,可以帮助企业、政府等机构实时监控公众对...
【Linux】基础IO流(上) 文章目录1. 预备知识2. 回忆C接口fopenfputsfprintfsnprintf追加方式——...
设计模式(二十七)----行为... 1 概述 如上图,设计一个软件用来进行加减计算。我们第一想法就是使用工具类ÿ...
精心整理前端主流框架学习路径 版权声明 本文原创作者:谷哥的小弟作者博客地址:http://blog....
typescript声明 前言 “d.ts”文件用于为 TypeScript 提供有关用 JavaScript 编写的 API...
HashMap源码分析 Java源码系列:下方连接 http://t.csdn.cn/Nwzed 文章目录...
一、基础算法3:二分 模板题+... 文章目录算法模板整数二分算法模板浮点数二分算法模板模板题数的范围原题链接题目题解数的三次方根原题链接...
Essential C++复习... 好久没写代码了,很多东西都忘记了。复盘一下C++编写基础头文件 与 输...
三十五、DRF中的过滤、Dja... 一、DRF中的过滤 REST framework 的通用列表视图的默认行为是返回模型管理器的整个查询...
基于RZ/G2UL Corte... 以太网接口是一种广泛应用的网络接口,它可以在不同的场合实现不同的功能。例如࿰...
nginx-会话保持-3 基于LNMP在负载均衡集群上部署wordpress(低配版) 在讲解会话...
【BBuf的CUDA笔记】九,... 0x0. 背景 随着年纪越来越大,读代码越来越困难,如果你发现看不懂同事...
springboot: myb... 目录 需求01:  根据不同类型 查询不同的订单名, 1. 书写订单 类型转换方法   2. 使用方...
最前端|什么是低代码?与传统开... 目录一、低代码介绍二、背景趋势三、低代码与传统代码开发(一)低代码能否替...
物流成本总是超标?一招教你降本... 先来看一个数据,中国仓储物流管理指标与世界标杆数据对比 第三方物流比例:...
exec家族与system函数 exec家族函数NAMEexecl, execlp, execle, execv, execvp, ...