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
来阻止提交。
如对本文有疑问, 点击进行留言回复!!
androidx+viewpage+tablayout+json开发(加载图片和视频)
网友评论