Layui提交表單時驗證必選的多選框是否有選中

問題

Layui在表單提交時，會有 checkbox 是必選的，須要在提交的時候進行驗證。

解決方法

1. 在 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>

2. 在 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>

說明

1. checkbox 的命名須要是 name + []，如上面例子中使用的是 test[]。
2. Object.keys(data) 是用來獲取數據中的鍵，返回值是一個數組，數組的值爲 data 的鍵名。
3. Array.filter() 用來獲取數組中符合要求的值，傳入的是 callback，返回值是一個數組。上面例子中的函數體是經過正則來進行匹配的，因爲 checkbox 的 name 設置爲 test[]，與正則中的 test 對應，在使用的時候只須要將 test 改成相應的 name 值 便可。
4. 最後，在驗證不經過時，能夠使用 return false 來阻止提交。