問題
Layui在表單提交時，會有 checkbox 是必選的，需要在提交的時候進行驗證，
解決方法
- 在
HTML中添加表單相應內容
<form action="" method="">
<!-- Checkbox -->
<input type="checkbox" name="test[]" value="https://www.cnblogs.com/Super-Lee/p/1" title="1">
<input type="checkbox" name="test[]" value="https://www.cnblogs.com/Super-Lee/p/2" title="2">
<input type="checkbox" name="test[]" value="https://www.cnblogs.com/Super-Lee/p/3" title="3">
<input type="checkbox" name="test[]" value="https://www.cnblogs.com/Super-Lee/p/4" title="4">
<!-- 提交 Button -->
<button type="submit" lay-submit layui-filter="filter">提交</button>
</form>
- 在
JavaScript中進行驗證
<script>
layui.use('form', () => {
const form = layui.form;
form.on('submit(filter)', (obj) => {
let data = https://www.cnblogs.com/Super-Lee/p/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來阻止提交，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/138825.html
標籤：JavaScript
上一篇：JavaScript 簡史
下一篇：WePY的開發環境的安裝