问题
Layui在表单提交时，会有 checkbox 是必选的，需要在提交的时候进行验证。
解决方法
- 在
HTML中添加表单相应内容
<form action="" method="">
<!-- Checkbox -->
<input type="checkbox" name="test[]" value="1" title="1">
<input type="checkbox" name="test[]" value="2" title="2">
<input type="checkbox" name="test[]" value="3" title="3">
<input type="checkbox" name="test[]" value="4" title="4">
<!-- 提交 Button -->
<button type="submit" class="layui-btn" lay-submit layui-filter="filter">提交</button>
</form>
- 在
JavaScript中进行验证
<script>
layui.use('form', () => {
const form = layui.form;
form.on('submit(filter)', (obj) => {
let data = obj.field;
if (!Object.keys(data).filter((x) => { return /^test\[\d+\]&/.test(x) }).length) {
console.log('请选择');
return false;
}
});
});
</script>
说明
-
checkbox的命名需要是name + []，如上面例子中使用的是test[]。 -
Object.keys(data)是用来获取数据中的键，返回值是一个数组，数组的值为data的键名。 -
Array.filter()用来获取数组中符合要求的值，传入的是callback，返回值是一个数组。上面例子中的函数体是通过正则来进行匹配的，由于checkbox的name设置为test[]，与正则中的test对应，在使用的时候只需要将test改为相应的name 值即可。 - 最后，在验证不通过时，可以使用
return false来阻止提交。