简单总结Layui中的表单验证
简单来说，实现Layui框架中的表单验证很简单，只需要给表单元素添加上”lay-verify“属性
示例如下：
一、校验规则
1.使用内置校验规则
Layui对于常见的字符串（如手机号，邮箱，网址等）都设置了相应的校验规则，不用再自己写规则，使用时只需要将校验规则赋值给“lay-verify”属性即可。
Layui中内置的校验规则如下：
规则 | 说明 |
|---|---|
required | 必填项 |
phone | 手机号 |
邮箱 | |
url | 网址 |
number | 数字 |
date | 日期 |
identity | 身份证 |
例如：设置一个输入框对手机号码进行校验：
<!-- 也可以支持多条校验规则同时使用，用“|”隔开 -->
手机号：<input type="text" placeholder="请输入手机号" lay-verify="required|phone">
<button lay-submit>提交</button>2.自定义校验规则
当然，在大部分时候，Layui中内置的校验规则还是有点不够用，所以我们还是需要来自定义规则来校验表单数据。
用一个实例来简单说明：
<!-- username为自定义的规则 -->
用户名：<input type="text" placeholder="请输入用户名" lay-verify="username"> // 用户名长度不能大于16位
layui.form.verify({
// value：表单的值、item：表单的DOM对象
username:function(value,item){
if (value.length > 16){
return "用户名大于16位";
}
}
})这个例子较为简单，只涉及到表单数据的长度判断，若要设置更复杂的规则还需要用到正则表达式，鉴于篇幅长度本篇博客不再赘述。相关的教程可以参考：JavaScript 正则表达式、JavaScript RegExp 对象
二、示例文件的实现代码
提前导入Layui和jQuery的CDN文件：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.4/css/layui.css">
<script src="https://www.layuicdn.com/layui/layui.js"></script>1.HTML代码
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend id="title">简单总结Layui中的表单验证</legend><br>
</fieldset>
<div class="container">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>内置的校验规则</legend>
</fieldset>
<div class=" layui-collapse" lay-accordion>
<!-- 必填项 -->
<div class="layui-form layui-colla-item">
<p class="layui-colla-title">必填项校验</p>
<!-- layui-show来决定是否默认展开 -->
<div class="layui-form-item layui-colla-content layui-show">
<label class="layui-form-label">必填项：</label>
<div class="layui-input-inline">
<!-- lay-verify 属性定义校验规则 -->
<input type="text" class="layui-input" placeholder="请输入必填项" lay-verify="required">
</div>
<div class="layui-form-mid layui-word-aux">此项为必填项</div>
<button id="btn-required" class="layui-btn layui-btn-sm" lay-submit>校验</button>
</div>
</div>
<!-- 手机号校验 -->
<div class="layui-form layui-colla-item">
<p class="layui-colla-title">手机号校验</p>
<div class="layui-form-item layui-colla-content">
<label class="layui-form-label">手机号：</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" placeholder="请输入正确格式的手机号码" lay-verify="phone">
</div>
<div class="layui-form-mid layui-word-aux">1开头的11位数字</div>
<button id="btn-phone" class="layui-btn layui-btn-sm" lay-submit>校验手机号</button>
</div>
</div>
<!-- 邮箱 -->
<div class="layui-form layui-colla-item">
<p class="layui-colla-title">邮箱校验</p>
<div class="layui-form-item layui-colla-content">
<label class="layui-form-label">邮箱：</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" placeholder="请输入正确格式的邮箱" lay-verify="email">
</div>
<div class="layui-form-mid layui-word-aux">正确的邮箱格式</div>
<button id="btn-email" class="layui-btn layui-btn-sm" lay-submit>校验邮箱</button>
</div>
</div>
<!-- 网址 -->
<div class="layui-form layui-colla-item">
<p class="layui-colla-title">网址校验</p>
<div class="layui-form-item layui-colla-content">
<label class="layui-form-label">网址：</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" placeholder="请输入网址" lay-verify="url">
</div>
<div class="layui-form-mid layui-word-aux">http(s)://开头</div>
<button id="btn-url" class="layui-btn layui-btn-sm" lay-submit>校验网址</button>
</div>
</div>
<!-- 数字 -->
<div class="layui-form layui-colla-item">
<p class="layui-colla-title">数字校验</p>
<div class="layui-form-item layui-colla-content">
<label class="layui-form-label">数字：</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" placeholder="请输入数字" lay-verify="number">
</div>
<div class="layui-form-mid layui-word-aux">数字</div>
<button id="btn-number" class="layui-btn layui-btn-sm" lay-submit>校验数字</button>
</div>
</div>
<!-- 日期 -->
<div class="layui-form layui-colla-item">
<p class="layui-colla-title">日期校验</p>
<div class="layui-form-item layui-colla-content">
<label class="layui-form-label">日期：</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" placeholder="请输入日期" lay-verify="date">
</div>
<div class="layui-form-mid layui-word-aux">格式：年（YYYY）-月（MM）-日（DD）</div>
<button id="btn-date" class="layui-btn layui-btn-sm" lay-submit>校验日期</button>
</div>
</div>
<!-- 身份证 -->
<div class="layui-form layui-colla-item">
<p class="layui-colla-title">身份证号校验</p>
<div class="layui-form-item layui-colla-content">
<label class="layui-form-label">身份证号：</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" placeholder="请输入身份证号" lay-verify="identity">
</div>
<div class="layui-form-mid layui-word-aux">正确的身份证号码</div>
<button id="btn-identity" class="layui-btn layui-btn-sm" lay-submit>校验身份证号</button>
</div>
</div>
</div>
</div>
<br><br>
<div class="container">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>自定义校验规则</legend>
</fieldset>
<!-- 自定义规则-->
<div class="layui-form layui-collapse" lay-accordion>
<div class="layui-form layui-colla-item">
<p class="layui-colla-title">自定义规则</p>
<div class="layui-form-item layui-colla-content layui-show">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="password" class="layui-input" placeholder="请输入密码" lay-verify="password">
</div>
<div class="layui-form-mid layui-word-aux">至少八位数字与字母的组合</div>
<button id="btn-custom" class="layui-btn layui-btn-sm" lay-submit>校验</button>
</div>
</div>
</div>
</div>2.CSS代码
#title {
text-align: center;
margin: 20px;
}
.container {
width: 800px;
margin: 20px auto;
}
button {
margin: 5px;
float: right;
}3.JS代码
// 注意：自 layui 2.6.0 开始，无需再单独加载指定模块，因为 layui.js 已经包含了所有的内置模块，无需再指定模块
$("#btn-required").click(function () {
layer.msg("必填项已填写",
{
icon: 6
, time: 1000
})
});
$("#btn-phone").click(function () {
layer.msg("手机号码格式正确",
{
icon: 6
, time: 1000
});
});
$("#btn-email").click(function () {
layer.msg("邮箱格式正确",
{
icon: 6
, time: 1000
});
})
$("#btn-url").click(function () {
layer.msg("网址格式正确",
{
icon: 6
, time: 1000
});
});
$("#btn-number").click(function () {
layer.msg("填写的值为数字",
{
icon: 6
, time: 1000
});
});
$("#btn-date").click(function () {
layer.msg("日期格式正确",
{
icon: 6
, time: 1000
});
});
$("#btn-identity").click(function () {
layer.msg("身份证格式正确",
{
icon: 6
, time: 1000
});
});
$("#btn-custom").click(function () {
layer.msg("密码格式正确", {
icon: 6
, time: 1000
});
});
// 引入layui的form模块，自定义校验规则
layui.form.verify({
//value：表单的值、item：表单的DOM对象
password: function (value,item) {
if (/[\u4e00-\u9fa5]+$/.test(value)) {
return "密码不能出现汉字噢";
}
if (value.length < 8) {
return "密码小于8位";
}
}
})本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
内容分发网络 CDN
内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。