系列文章目录
layui动态表格翻页和搜索的代码分析
layui框架实战案例(3)：layui上传错误请求上传接口出现异常解决方案
layui框架实战案例(9)：layPage 静态数据分页组件
layui框架实战案例(10)：短信验证码60秒倒计时
layui框架实战案例(11)：表单自定义验证规则
layui框架实战案例(12)：layui标签输入框inputTag
layui框架实战案例(13)：colorpicker颜色选择器的使用
layui框架实战案例(14)：tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
layui框架实战案例(15)：上传提示413 request entity too large宝塔配置的解决方案
layui框架实战案例(16)：xm-select下拉多选插件实战记录（远程搜索、过滤、翻页、单选、提示文字）
layui框架实战案例(17)：流加载文档layui.flow组件的前后端解决方案
layui实现定位、查询数据以及select筛选的组合功能
layui多文件上传与PHP后端对接的解决方案
layui内部表单互动的实战案例：根据radio单选框自动改变input内容
layui复选框checkbox全选和获取值的解决方案
layui和weui结合手机端select表单底部选择和被遮挡的解决方案
文章目录
系列文章目录
前言
一、保存草稿功能
解决思路
提交按钮
layui异步提交
后端验证
二、单选复选框数据验证
读取单选或复选数据
数据验证方案
快速跳转
页面内快速跳转封装函数
数据验证并跳转
设置对应的id="b1"
前言
在使用layui框架做表单提交的时候，项目需要适时的保存草稿，同时对单选或复选框做必填的验证
一、保存草稿功能
解决思路
设置“保存草稿”和“提交信息审核”两个按钮，对应的事件过滤分别为lay-filter="draft"和lay-filter="add"
将各个表单的lay-verify="required"验证规则全部取消，否则在做草稿保存的时候，无法正常提交；
提交信息审核时，单独做信息验证；
提交按钮
<button class="layui-btn layui-bg-cyan" lay-filter="draft" lay-submit="" id="L_draft" type="submit"> 保存草稿 </button> <button class="layui-btn layui-bg-red" lay-filter="add" lay-submit="" id="L_add" type="submit"> 提交信息审核 </button>
layui异步提交
//草稿入库数据; form.on('submit(draft)', function (data) { //ajax数据入库; })
//审核入库数据; form.on('submit(add)', function (data) { //ajax数据入库; })
后端验证
- 如果是保存草稿，插入数据库后，生成自动自增字段，然后跳转至编辑界面；
- 此时，“保存草稿”功能为编辑功能，“信息审核”功能为需要验证的编辑功能；
二、单选复选框数据验证
读取单选或复选数据
layui的radio和checkbox的数据传值为数组格式，需要将定义初始数组，然后将对应的数组转化为字符串入库即可。
//基础疾病 var patient_basic = []; $("input:checkbox[name='patient_basic']:checked").each(function(i){ patient_basic[i] = $(this).val(); }); //数据 patient_basic.toString(),
数据验证方案
对于普通的input表单，进行数据的空、输入合格可采用js正常验证，如果不符合要求，可以通过focus()属性，进行聚焦，快速跳转至该字段。如下：
if (turn_days == "") { layer.msg("核酸/抗原转阴天数不能为空且必须为数字", {icon: 2, time: 2000}); $('#turn_days').focus(); return false; }
快速跳转
页面内快速跳转封装函数
/*页面内快速跳转*/ function getTop(no) { var t = $('#b' + no).offset().top; // 获取需要跳转到标签的top值 $("html,body").animate({ scrollTop: t }, 1000); }
数据验证并跳转
if (patient_basic.length == 0) { layer.msg("基础疾病选项不能为空", {icon: 2, time: 2000}); getTop(1); return false; }
设置对应的id=“b1”
<div class="layui-input-inline" id="b1"> <input type="checkbox" name="patient_basic" title="心脑血管疾病(含高血压)" value="心脑血管疾病(含高血压)" lay-skin="primary" ><br> <input type="checkbox" name="patient_basic" title="糖尿病" value="糖尿病" lay-skin="primary" ><br> <input type="checkbox" name="patient_basic" title="慢性肝病" value="慢性肝病" lay-skin="primary" ><br> <input type="checkbox" name="patient_basic" title="慢性肾病" value="慢性肾病" lay-skin="primary" ><br> <input type="checkbox" name="patient_basic" title="慢性肺病" value="慢性肺病" lay-skin="primary" ><br> <input type="checkbox" name="patient_basic" title="免疫功能缺陷" value="免疫功能缺陷" lay-skin="primary" ><br> </div>
@漏刻有时lockdata.cn
