本文介绍如何在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加入简单验证的方法分享完毕，希望能为读者提供参考，并欢迎继续支持本站内容。