目录:
简单来说,实现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">
<script>
// 用户名长度不能大于16位
layui.form.verify({
// value:表单的值、item:表单的DOM对象
username:function(value,item){
if (value.length > 16){
return "用户名大于16位";
}
}
})
</script>
这个例子较为简单,只涉及到表单数据的长度判断,若要设置更复杂的规则还需要用到正则表达式,鉴于篇幅长度本篇博客不再赘述。相关的教程可以参考: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代码
<style>
#title {
text-align: center;
margin: 20px;
}
.container {
width: 800px;
margin: 20px auto;
}
button {
margin: 5px;
float: right;
}
</style>
3.JS代码
<script>
// 注意:自 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位";
}
}
})
</script>
评论 (0)