当我们使用layui框架进行Web开发时，添加表单验证是必不可少的一项功能。layui可以与Validform插件集成使用，从而使我们的表单验证更加方便快捷。以下是实现这一功能的步骤：
第一步：引入必要的CSS和JS文件
首先需要在页面中引入layui和Validform的CSS和JS文件，可以使用CDN或下载到本地进行引入。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证示例</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/Validform/5.3.2/css/style.css">
</head>
<body>
<!-- 省略内容 -->
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script src="https://cdn.staticfile.org/Validform/5.3.2/Validform.min.js"></script>
</body>
</html>
第二步：编写表单代码
接下来需要编写表单代码，使用layui的form模块，这里示例代码给出了一个简单的表单：
<form id="formDemo" class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="username" 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" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
第三步：初始化Validform插件
在页面加载完毕后需要对Validform插件进行初始化，配置各项参数，并触发表单的提交事件。示例代码如下：
$(function(){
//表单验证
$('#formDemo').Validform({
tiptype: function(msg, o, cssctl){
//可以在这里自定义提示信息的样式
var objtip=$(".error-box");
cssctl(objtip,o.type);
objtip.text(msg);
},
callback:function(data){
//在这里可以对表单的提交进行处理，示例代码只做了一个弹窗
layer.alert(JSON.stringify(data.field), {
title: '表单数据'
});
return false;//防止表单跳转
}
});
});
第四步：运行测试
在完成以上三个步骤后，我们就可以在浏览器中运行测试了。当在表单中输入数据并点击提交按钮时，插件会自动验证表单中的数据，并在验证不通过时进行提示。示例代码如下：
https://codepen.io/mzlogin/pen/RwKBexr
示例二
如果我们需要进行更加详细的验证，例如对于输入的邮件地址需要符合邮箱格式，可以使用Validform的自定义规则进行扩展。在示例代码中，我们增加了对于邮箱地址的格式验证。示例代码如下：
<form id="formDemo" class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="username" 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" 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="text" name="email" lay-verify="email" placeholder="请输入邮箱地址" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
$(function(){
//添加自定义插件规则
$.Datatype.email = /^[a-z0-9\-_]+(\.[a-z0-9\-_]+)*@[a-z0-9\-_]+(\.[a-z0-9\-_]+)+$/;
//表单验证
$('#formDemo').Validform({
tiptype: function(msg, o, cssctl){
var objtip=$(".error-box");
cssctl(objtip,o.type);
objtip.text(msg);
},
callback:function(data){
layer.alert(JSON.stringify(data.field), {
title: '表单数据'
});
return false;
}
});
});
示例代码：https://codepen.io/mzlogin/pen/gOwjdKv
在验证不通过时，Validform会自动进行错误提示，同时也会在表单项后面显示错误信息。在验证通过时，可以通过回调函数对数据进行处理。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：layui在form表单页面通过Validform加入简单验证的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 