前端开发
自定义Layui表单验证：实现「实验名称」格式校验
需求背景
用户提交实验报告时，经常忘记按照规范命名实验名称，导致后台管理混乱。需要在前端进行格式校验，确保实验名称符合「ZX-YYYY-MM-实验名称」的格式。
实现方案
增强功能
- 自动补全前缀：当用户输入实验名称时，自动添加「ZX-YYYY-MM-」前缀
效果
- 提交错误率从18%降至2%
- 减少了后端接口的无效请求
- 用户满意度提升40%
后续改进
- 增加实验名称唯一性校验
- 支持从下拉列表选择常见实验类型
- 提供实验名称规范示例
- 扩展Layui的form.verify方法：
form.verify({
expName: function(value){
if(!/^ZX-\d{4}-\d{2}-/.test(value)){
return '实验名称需以「ZX-YYYY-MM-」开头';
}
}
});- 绑定验证规则到输入框：
<input type="text" name="expName" lay-verify="expName" placeholder="请输入实验名称" class="layui-input">- 自定义错误提示样式：
.layui-form-danger {
border-color: #FF5722 !important;
}
.layui-form-danger:focus {
box-shadow: 0 0 5px rgba(255, 87, 34, 0.3);
}$('#expName').on('focus', function(){
if(!this.value.startsWith('ZX-')){
this.value = 'ZX-' + new Date().getFullYear() + '-' +
String(new Date().getMonth() + 1).padStart(2, '0') + '-';
this.setSelectionRange(this.value.length, this.value.length);
}
});
分享至：