系列文章目录

文章目录

系列文章目录
前言
一、保存草稿功能
二、单选复选框数据验证

前言

在这里插入图片描述
在使用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

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