web前端：Layui提交表单时验证必选的多选框是否有选中

　　事实上，layui更多是面向于后端开发者，所以在组织形式上毅然采用了几年前的以浏览器为宿主的类AMD模块管理方式，却又并非受限于CommonJS的那些条条框框，它拥有自己的模式，更加轻量和简单。layui定义为"经典模块化"，并非是刻意强调"模块"理念本身，而是有意避开当下JS社区的主流方案，试图以尽可能简单的方式去诠释高效!它的所谓经典，是在于对返璞归真的执念，它以当前浏览器普通认可的方式去组织模块!

　　问题

　　Layui在表单提交时，会有checkbox是必选的，需要在提交的时候进行验证。

　　解决方法

　　在html中添加表单相应内容

　　<formaction=""method="">

　　<!--Checkbox-->

　　<inputtype="checkbox"name="test[]"value="1"title="1">

　　<inputtype="checkbox"name="test[]"value="2"title="2">

　　<inputtype="checkbox"name="test[]"value="3"title="3">

　　<inputtype="checkbox"name="test[]"value="4"title="4">

　　<!--提交Button-->

　　<buttontype="submit"class="layui-btn"lay-submitlayui-filter="filter">提交</button>

　　</form>

　　在Javascript中进行验证

　　<script>

　　layui.use('form',()=>{

　　constform=layui.form;

　　form.on('submit(filter)',(obj)=>{

　　letdata=obj.field;

　　if(!Object.keys(data).filter((x)=>{return/^test\\[\\d+\\]&/.test(x)}).length){

　　console.log('请选择');

　　returnfalse;

　　}

　　});

　　});

　　</script>

　　说明

　　1checkbox的命名需要是name+[]，如上面例子中使用的是test[]。

　　2Object.keys(data)是用来获取数据中的键，返回值是一个数组，数组的值为data的键名。

　　3Array.filter()用来获取数组中符合要求的值，传入的是callback，返回值是一个数组。上面例子中的函数体是通过正则来进行匹配的，由于checkbox的name设置为test[]，与正则中的test对应，在使用的时候只需要将test改为相应的name值即可。

　　4最后，在验证不通过时，可以使用returnfalse来阻止提交。

　　layui认为这种轻量的组织方式，仍然可以填补WebPack以外的许多场景。所以它坚持采用经典模块化，也正是能让人避开工具的复杂配置，重新回归到原生态的Html/CSS/JavaScript本身!