对于 Layui 表单验证，可以结合 jQuery 使用 Layui 的验证规则。以下是一个示例，展示了如何使用 Layui 和 jQuery 实现用户名、密码、手机号、邮箱、身份证号的表单验证：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layui & jQuery Form Validation</title>
<link rel="stylesheet" href="path/to/layui/css/layui.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="path/to/layui/layui.js"></script>
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机号</label>
<div class="layui-input-block">
<input type="text" name="phone" lay-verify="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">身份证号</label>
<div class="layui-input-block">
<input type="text" name="idCard" lay-verify="idCard" 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="formDemo">提交</button>
</div>
</div>
</form>
<script>
layui.use('form', function(){
var form = layui.form;
// 自定义验证规则
form.verify({
username: function(value) {
if (value.length < 3 || value.length > 12) {
return '用户名必须为3-12个字符';
}
},
password: function(value) {
if (value.length < 6) {
return '密码必须大于等于6个字符';
}
},
phone: function(value) {
if (!/^[1-9]\d{10}$/.test(value)) {
return '请输入有效的手机号';
}
},
email: function(value) {
if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {
return '请输入有效的邮箱地址';
}
},
idCard: function(value) {
if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
return '请输入有效的身份证号';
}
}
});
// 监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
</body>
</html>
在这个示例中，使用 Layui 的表单组件和 jQuery 库，使用 lay-verify 属性指定 Layui 的验证规则，并通过 form.verify() 方法自定义了一些验证规则，监听了提交事件，当表单提交时，会弹出一个提示框显示表单字段的值。
Layui 的表单验证规则和 jQuery 的验证规则是分开的，Layui 的验证规则主要通过 lay-verify 属性来指定。在自定义验证规则时，可以使用 form.verify() 方法。
本站原创内容，转载请注明来源：https://www.liutonghui.com/183.html
评论列表（0条）
暂无评论