layUI自定义校验规则
howtomakeit69
于 2021-10-27 07:30:00 发布
1704
收藏 3
文章标签： layui 前端 ui javascript
版权
在使用layUI这款开源模块化前端 UI 框架是，如何自定义表单验证规则？
有两种写法，第一种是函数式方式，第二种是数组的形式；其大致代码已写在官网上，这里不再赘述，需要请查看 ：
form.verify({
username: function(value, item){ //value：表单的值、item：表单的DOM对象
if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
return '用户名不能有特殊字符';
}
if(/(^\_)|(\__)|(\_+$)/.test(value)){
return '用户名首尾不能出现下划线\'_\'';
}
if(/^\d+\d+\d$/.test(value)){
return '用户名不能全为数字';
}
//如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
if(value === 'xxx'){
alert('用户名不能为敏感词');
return true;
}
}
//我们既支持上述函数式的方式，也支持下述数组的形式
//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
,pass: [
/^[\S]{6,12}$/
,'密码必须6到12位，且不能出现空格'
]
});
图 1.官方文档
本文主要记录在使用过程中出现的细节问题。
函数式写法，也就是你看到的这一段：
form.varify（{
pass: [
/^[\S]{6,12}$/
,'密码必须6到12位，且不能出现空格'
]
}）
这一写法需要注意三点，特别注意：这三点必须同时做到才能正确设置自定义表单验证：
1.引用这段代码之前，需要先从layUI中获取form对象，再赋值给form
var form = layui.form
form.verify（{
pass: [
/^[\S]{6,12}$/
,'密码必须6到12位，且不能出现空格'
]
}）
图2.js中的写法
2.这段代码是需要写在js文件中的
3.layUI的引用顺序
在html文件中，layUI的引用应该放在最前的
<body>
<!-- 导入layUI -->
<script src="/assets/lib/layui/layui.all.js"></script>
<!-- 导入jQuery -->
<script src="/assets/lib/jquery.js"></script>
<!-- 导入自己的js脚本 -->
<script src="/assets/js/login.js"></script>
</body>
图3.html文件中的引入
最后，当你自定义了类似上面的验证规则后，你只需要把 key（图二中的pass,若有多个key值，以“|”进行分隔） 赋值给输入框的 lay-verify 属性即可：
<input type="text" lay-verify="required|username" placeholder="请输入用户名">
<input type="password" lay-verify="required|pass" placeholder="请输入密码">
引用：常见的密码正则表达式 ：常见密码正则表达式 - 酷极和 - 博客园
官方文档：表单模块文档 - Layui
————————————————
版权声明：本文为CSDN博主「howtomakeit69」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/howtomakeit69/article/details/120985000
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix