layui结合Validform实现表单验证与开关控制
作者:阿沐时间:2026-10-23 10:56:12浏览:486
本文介绍如何在layui表单中集成Validform插件进行数据校验,涵盖邮箱、密码等字段的正则配置。同时演示了switch开关组件的监听方法,并对比了Validform提交前回调与layui原生form.on提交事件的实现差异,帮助开发者优化表单交互逻辑。
layui表单基础验证配置
在layui表单中实现基础验证功能。
<input type="text" name="email" datatype="e" ignore="ignore" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
datatype="e"验证邮箱
ignore="ignore"忽略,如果填写就验证没有填入邮箱就不验证
详情参考Validform_v5.3.2.js
贴出一部分:
var tipmsg={//默认提示文字;
tit:"提示信息",
w:{
"*":"不能为空!",
"*6-16":"请填写6到16位任意字符!",
"n":"请填写数字!",
"n6-16":"请填写6到16位数字!",
"s":"不能输入特殊字符!",
"s6-18":"请填写6到18位字符!",
"p":"请填写邮政编码!",
"m":"请填写手机号码!",
"e":"邮箱地址格式不对!",
"url":"请填写网址!"
},
def:"请填写正确信息!",
undef:"datatype未定义!",
reck:"两次输入的内容不一致!",
r:"通过信息验证!",
c:"正在检测信息…",
s:"请{填写|选择}{0|信息}!",
v:"所填信息没有经过验证,请稍后…",
p:"正在提交数据…"
}
Validform.util={
dataType:{
"*":/[\w\W]+/,
"*6-16":/^[\w\W]{6,16}$/,
"n":/^\d+$/,
"n6-16":/^\d{6,16}$/,
"s":/^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]+$/,
"s6-18":/^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]{6,18}$/,
"p":/^[0-9]{6}$/,
"m":/^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$/,
"e":/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
"url":/^(\w+:\/\/)?\w+(\.\w+)+.*$\/
},
switch开关组件监听
演示通过点击图标实现左右切换的开关效果。
<input type="checkbox" name="loginflag" checked lay-skin="switch" lay-filter="switchTest" lay-text="允许|禁止">
Validform验证规则详解
配置验证规则的具体设置方法。
<input type="text" name="password" datatype="s6-18" placeholder="请输入密码" autocomplete="off" class="layui-input">
s6-18表示字符串长度限制为6到18位,s代表string类型。
提交事件与验证流程整合
修改layui监听事件,确保先执行表单验证再提交。
$("#signupForm").Validform({ //根据id触发
btnSubmit:"#formSubmit", //绑定id根据id触发验证
tiptype:3, //第三种方式
showAllError:true, //显示所有的错误
beforeSubmit:function(curform){ //验证过后执行save方法
save();
},
});
展示原始的layui监听代码逻辑。
layui.use(['form'], function(){
var form = layui.form;
//监听提交
form.on('submit(submitForm)', function(data){
save();
});
});
以上关于在layui form表单页面通过Validform加入简单验证的方法分享完毕,希望能为读者提供参考,并欢迎继续支持本站内容。
作者最新文章
为什么叫JavaScript:语言命名由来及与Java的历史渊源
2026-11-05 11:37:48
JS获取当前时间年月日时分秒并格式化为YYYY-MM-DD HH:mm:ss
2026-11-04 21:25:21
不同语言间JS与Java/Python加密结果不一致怎么办
2026-11-04 18:27:23
Mock.js 拦截 Axios 和 Fetch 请求的原理与配置方法
2026-11-04 08:13:59
JS怎么获取当前日期并格式化为YYYY-MM-DD
2026-11-03 18:47:03
