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框架做表单提交的时候，项目需要适时的保存草稿，同时对单选或复选框做必填的验证

---

一、保存草稿功能

解决思路

• 设置“保存草稿”和“提交信息审核”两个按钮，对应的事件过滤分别为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