2023-04-24 08:42:47 +08:00
|
|
|
|
<form class="layui-form">
|
|
|
|
|
<input type="text" name="username" lay-verify="required|username" placeholder="用户名" class="layui-input">
|
|
|
|
|
<hr>
|
|
|
|
|
<input type="password" name="password" lay-verify="password" placeholder="密码" class="layui-input">
|
|
|
|
|
<hr>
|
|
|
|
|
<button class="layui-btn" lay-submit lay-filter="demo-verify">提交</button>
|
|
|
|
|
</form>
|
2023-05-03 17:17:39 +08:00
|
|
|
|
|
|
|
|
|
<!-- import layui -->
|
2023-04-24 08:42:47 +08:00
|
|
|
|
<script>
|
|
|
|
|
layui.use(function(){
|
|
|
|
|
var form = layui.form;
|
|
|
|
|
|
|
|
|
|
// 自定义验证规则,如下以验证用户名和密码为例
|
|
|
|
|
form.verify({
|
2023-09-11 11:58:04 +08:00
|
|
|
|
// 参数 value 为表单的值;参数 item 为表单元素
|
2023-04-24 08:42:47 +08:00
|
|
|
|
username: function(value, item){
|
|
|
|
|
if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
|
|
|
|
|
return '用户名不能有特殊字符';
|
|
|
|
|
}
|
|
|
|
|
if(/(^_)|(__)|(_+$)/.test(value)) return '用户名首尾不能出现 _ 下划线';
|
|
|
|
|
if(/^\d+$/.test(value)) return '用户名不能全为数字';
|
|
|
|
|
|
2023-09-11 11:58:04 +08:00
|
|
|
|
// 若不想自动弹出默认提示框,可返回 true,这时可通过其他提示方式替代(v2.5.7 新增)
|
2023-04-24 08:42:47 +08:00
|
|
|
|
if(value === 'xxx'){
|
|
|
|
|
alert('用户名不能为敏感词');
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
},
|
2023-09-11 11:58:04 +08:00
|
|
|
|
password: function(value) {
|
|
|
|
|
if (!/^[\S]{6,12}$/.test(value)) {
|
|
|
|
|
return '密码必须为 6 到 12 位的非空字符';
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-04-24 08:42:47 +08:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 提交事件
|
|
|
|
|
form.on('submit(demo-verify)', function(data){
|
|
|
|
|
var field = data.field; // 获取表单字段值
|
|
|
|
|
|
|
|
|
|
// 显示填写结果,仅作演示用
|
|
|
|
|
layer.alert(JSON.stringify(field), {
|
|
|
|
|
title: '当前填写的字段值'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 此处可执行 Ajax 等操作
|
|
|
|
|
// …
|
|
|
|
|
|
|
|
|
|
return false; // 阻止默认 form 跳转
|
|
|
|
|
});
|
|
|
|
|
})
|
2023-09-11 11:58:04 +08:00
|
|
|
|
</script>
|