問題 Layui在表單提交時，會有 是必選的，需要在提交的時候進行驗證。 解決方法 1. 在 中添加表單相應內容 2. 在 中進行驗證 說明 1. 的命名需要是 ，如上面例子中使用的是 。 2. 是用來獲取數據中的鍵，返回值是一個數組，數組的值為 的鍵名。 3. 用來獲取數組中符合要求的值，傳入的是 ...
問題
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來阻止提交。
