layui框架实战案例(18)：保存草稿和单选radio复选框checkbox无focus属性快速聚焦跳转的解决方案

系列文章目录

1. ​​layui动态表格翻页和搜索的代码分析​​
2. ​​layui框架实战案例(3)：layui上传错误请求上传接口出现异常解决方案​​
3. ​​layui框架实战案例(9)：layPage 静态数据分页组件​​
4. ​​layui框架实战案例(10)：短信验证码60秒倒计时​​
5. ​​layui框架实战案例(11)：表单自定义验证规则​​
6. ​​layui框架实战案例(12)：layui标签输入框inputTag​​
7. ​​layui框架实战案例(13)：colorpicker颜色选择器的使用​​
8. ​​layui框架实战案例(14)：tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案​​
9. ​​layui框架实战案例(15)：上传提示413 request entity too large宝塔配置的解决方案​​
10. ​​layui框架实战案例(16)：xm-select下拉多选插件实战记录（远程搜索、过滤、翻页、单选、提示文字）​​
11. ​​layui框架实战案例(17)：流加载文档layui.flow组件的前后端解决方案​​
12. ​​layui实现定位、查询数据以及select筛选的组合功能​​
13. ​​layui多文件上传与PHP后端对接的解决方案​​
14. ​​layui内部表单互动的实战案例：根据radio单选框自动改变input内容​​
15. ​​layui复选框checkbox全选和获取值的解决方案​​
16. ​​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