layui.js表单验证实战：文本框、手机与邮箱验证
65KB |
更新于2024-09-01
| 89 浏览量 | 4 评论 | 举报
收藏
立即下载 layui.js是一个轻量级的前端UI库，主要用于简化Web开发中的基础组件构建，包括表单、布局、模块化等功能。本文主要讲解如何使用layui.js实现表单验证功能，帮助开发者快速集成并提升用户体验。
在HTML代码中，首先引入layui.js库和样式文件，确保在页面上能够正确运行验证功能：
```html
<link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" rel="external nofollow">
<script src="layui/layui.js"></script>
<script src="layui/lay/dest/layui.all.js"></script>
```
表单验证的核心在于`lay-verify`属性，它允许开发者自定义验证规则。在上述HTML示例中，有几个关键的表单元素展示了不同的验证应用场景：
1. 反馈主题（title）：一个文本框，要求用户输入标题，`lay-verify="title"`表示将对这个输入字段进行验证。可能的验证规则可以设置为非空、字符长度限制等。
2. 姓名（fname）：同样是一个文本输入框，`lay-verify="fname"`表明也需要验证，可能检查格式或是否为空。
3. 手机（phone）：使用`type="tel"`的输入框，用于输入电话号码，`lay-verify="phone"`可能包括格式验证，如正则表达式匹配常见的手机号码格式。
4. textarea：用于多行文本输入，可能需要检查输入的格式或长度。
为了实现这些验证，可以在layui.js库中定义验证规则，例如：
```javascript
layui.use(['form', 'layer'], function(){
var form = layui.form(),
layer = layui.layer;
// 验证规则对象
var ruleObj = {
title: {
required: true, // 必填项
len: [1, 50] // 字符长度限制
},
fname: {
required: true
},
phone: {
mobile: true // 手机号码格式验证
}
};
// 添加验证规则并监听表单提交事件
form.verify(ruleObj, {
submit: function(form){
// 在这里处理表单提交前的验证逻辑，如果验证失败，显示错误提示
if (!form.verify()) return false;
// 如果验证通过，继续执行表单提交操作
// ...
}
});
});
```
这段代码中，`layui.form().verify()`方法接收规则对象和提交事件处理器。当用户提交表单时，会自动调用规则对象中的验证函数。如果验证失败，lay-layer库可以用来展示错误提示，提高用户体验。
layui.js提供了一种简洁的方式来实现前端表单验证，开发者可以根据实际需求定制验证规则，增强表单的交互性和有效性。通过合理利用layui.js的验证功能，可以大大提高网站的可用性和可靠性。
layui.js实现的表单验证功能示例实现的表单验证功能示例
本文实例讲述了layui.js实现的表单验证功能。分享给大家供大家参考，具体如下：
该示例可针对文本框，手机，邮箱，textarea等格式进行验证
首先引入如下文件：
<script src="layui/layui.js"></script>
<script src="layui/lay/dest/layui.all.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" rel="external nofollow" >
HTML代码：
<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="fname" class="layui-input" type="text" placeholder="请输入姓名" autocomplete="off" lay-verify="fname">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机</label>
<div class="layui-input-block">
<input name="phone" class="layui-input" type="tel" autocomplete="off" placeholder="请输入手机" lay-verify="phone">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input name="email" class="layui-input" type="text" autocomplete="off" placeholder="请输入邮箱" lay-verify="email">
</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" name="contact" id="LAY_demo_editor" lay-verify="contact"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-filter="demo2" lay-submit="">跳转式提交</button>
<button class="layui-btn" lay-filter="demo1" lay-submit="">立即提交</button>
<button class="layui-btn layui-btn-primary" type="reset">重置</button>
</div>
</div>
</form>
js验证代码
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form()
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate;
下载后可阅读完整内容，剩余3页未读，继续阅读
开通会员，免费下载（低至0.43元/天)
成为会员后, 你将解锁
下载资源随意下
优质VIP博文免费学
优质文库回答免费看
付费资源9折优惠
相关推荐
<! DOCTYPE htm1><htm1><head> <meta charset="utf-8"><title>Title</title> <link rel="stylesheet" href="static/layui/css/layui.css"><script src="static/js/jquery-3. 7.1.min.js"></script><script src="static/layui/layui.js"></script>/head><body> div class="layui-layout layui-layout-admin">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>收费项目列表</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="https://www.layuicdn.com/layui-v2.6.8/css/layui.css">
<style>
.x-nav { padding: 0 20px; position: relative; z-index: 99; border-bottom: 1px solid #e5e5e5; line-height: 60px; }
.x-body { padding: 20px; }
.layui-table td, .layui-table th { padding: 9px 15px; }
.td-manage a { margin: 0 5px; }
.dialog-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
}
.dialog-content {
background: #fff;
padding: 20px;
border-radius: 5px;
width: 800px;
max-height: 90vh;
overflow-y: auto;
}
.x-red { color: red; }
</style>
</head>
<body>
ID
所属小区
收费编号
项目名称
创建时间
{{ item.id }}
{{ item.x_id }}
{{ item.m_count }}
{{ item.m_name }}
{{ item.creat_Time }}
{{ dialogTitle }}
<form class="layui-form layui-form-pane">
<input type="hidden" v-model="formData.id">
<label class="layui-form-label">
*所属小区
</label>
<input type="text" v-model="formData.x_id" placeholder="请输入所属小区编号"
class="layui-input" lay-verify="required">
<label class="layui-form-label">
*收费名称
</label>
<input type="text" v-model="formData.m_name" placeholder="请输入项目名称"
class="layui-input" lay-verify="required">
<button class="layui-btn layui-btn-primary" type="button" @click="dialogVisible = false">取消</button>
<button class="layui-btn" type="button" @click="submitForm">确定</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
<script>
// 从localStorage获取房产数据
function getproData() {
const data = localStorage.getItem('proData');
return data ? JSON.parse(data) : [
{
id: '3',
x_id: '1',
m_count: 'A栋',
m_name: '金华小区A栋',
create_Time: '2019-12-13'
},
{
id: '2',
x_id: '2',
m_count: 'A栋',
m_name: '金华小区A栋',
create_Time: '2019-12-11'
},
{
id: '1',
x_id: '3',
m_count: 'A栋',
m_name: '金华小区A栋',
create_Time: '2019-12-12'
}
];
}
new Vue({
el: '#app',
data: {
proList: getproData(),
dialogVisible: false,
dialogTitle: '编辑收费项目',
currentIndex: -1,
formData: {
id: '',
x_id: '',
m_count: '',
m_name: '',
create_Time: ''
}
},
mounted() {
this.initLayui();
},
methods: {
initLayui() {
layui.use(['form', 'laydate', 'layer'], () => {
const form = layui.form;
const laydate = layui.laydate;
window.layer = layui.layer;
form.render();
laydate.render({
elem: '#checkInDate',
max: '2099-12-31',
done: (value) => {
this.formData.create_Time = value;
}
});
});
},
refresh() {
this.proList = getproData();
layer.msg('刷新成功', {icon: 1});
},
editItem(index) {
this.dialogTitle = '编辑收费项目';
this.currentIndex = index;
this.formData = JSON.parse(JSON.stringify(this.proList[index]));
this.dialogVisible = true;
this.$nextTick(() => {
layui.form.render();
// 重新初始化日期选择器，确保显示正确的日期
layui.laydate.render({
elem: '#checkInDate',
max: '2099-12-31',
value: this.formData.create_Time,
done: (value) => {
this.formData.create_Time = value;
}
});
});
},
deleteItem(index) {
const _this = this;
layer.confirm('确定要删除这条记录吗？', function(){
_this.proList.splice(index, 1);
localStorage.setItem('houseData', JSON.stringify(_this.proList));
layer.msg('删除成功', {icon: 1});
});
},
submitForm() {
const form = layui.form;
// 验证表单
form.verify();
if (!this.validateForm()) {
return;
}
// 编辑
this.proList.splice(this.currentIndex, 1, this.formData);
// 保存到localStorage
localStorage.setItem('proData', JSON.stringify(this.proList));
this.dialogVisible = false;
layer.msg('编辑成功', {icon: 1});
},
validateForm() {
if (!this.formData.x_id) {
layer.msg('请输入所属小区', {icon: 5});
return false;
}
if (!this.formData.m_name) {
layer.msg('请输入名称', {icon: 5});
return false;
}
if (!this.formData.m_name) {
layer.msg('项目名称不能为空', {icon: 5});
return false;
}
return true;
},
}
});
</script>
</body>
</html>
表单无法显示数据，写出更改后的代码
| ID | 所属小区 | 收费编号 | 项目名称 | 创建时间 | |
|---|---|---|---|---|---|
| {{ item.id }} | {{ item.x_id }} | {{ item.m_count }} | {{ item.m_name }} | {{ item.creat_Time }} |
{{ dialogTitle }}
<form class="layui-form layui-form-pane"> <input type="hidden" v-model="formData.id">
<label class="layui-form-label">
*所属小区
</label>
<input type="text" v-model="formData.x_id" placeholder="请输入所属小区编号"
class="layui-input" lay-verify="required">
<label class="layui-form-label">
*收费名称
</label>
<input type="text" v-model="formData.m_name" placeholder="请输入项目名称"
class="layui-input" lay-verify="required">
<button class="layui-btn layui-btn-primary" type="button" @click="dialogVisible = false">取消</button>
<button class="layui-btn" type="button" @click="submitForm">确定</button>
</form>
资源评论
洪蛋蛋
2025.05.31
"文章提供了layui.js表单验证的具体示例，涵盖了多种输入类型，对开发人员很有帮助。"
艾斯·歪
2025.04.14
"layui.js实现的表单验证功能示例，针对多种常见格式进行验证，非常实用。"
ali-12
2025.03.22
"本文详细介绍了layui.js实现表单验证的方法，包括文本框、手机、邮箱等验证，值得学习。"
天眼妹
2025.03.20
"通过引入layui.css和相关HTML代码，实现了表单的快速验证，简单易学。"🍖
weixin_38622983
- 粉丝: 6
我的内容管理
展开
最新资源
- EditPlus 3.2中文版及激活注册文件下载
- 深入解析Web浏览器核心技术与实现
- 多功能数据校验工具，提升数据验证效率
- JSP项目开发全程实录完整jar包资源
- USBISP烧写软件简介与使用指南
- Struts2 Core 2.3.7 源码解析与分析
- Windows系统下搭建本地SVN服务器的完整指南
- 2013年最新淘宝Android客户端源码及淘宝客项目实现
- 七个实用的Java小游戏代码合集
- Java运行环境JRE 1.4.2下载与安装指南
- .NET抽奖小程序详解与实现
- 适用于Linux系统的Apache Tomcat 6.0.29安装包
- EasyUI中文API与完整演示示例资源包
- Android平台超级记事本应用开发与学习指南
- Android登录注册源码合集及实现案例
- IIS5.1 安装指南与简易使用教程
- SP_MDT_exe_v3.1304.00：全面支持MTK芯片Android手机刷机的工具
- C#与.NET经典实例解析：400个案例详解
- 《Visual C++与MATLAB图像处理与识别案例精选》配套源码
- 建伍KPG87D对讲机写频软件及其应用解析
- CDex轉檔工具：將CD音樂轉換為MP3格式的實用程式
- PHPfileNavigator 2.3.3 发布，增强PHP文件管理功能
- TCP-IP技术详解：基础与高级篇
- Unity3D完整特效资源包整合：魔法技能与多样化视觉效果集合
