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

问题 Layui在表单提交时,会有 checkbox 是必选的,需要在提交的时候进行验证。 解决方法 在 HTML 中添加表单相应内容 <form action="" method=""> <!-- Checkbox -->...

问题

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>
  1. 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,返回值是一个数组。上面例子中的函数体是通过正则来进行匹配的,由于 checkboxname 设置为 test[],与正则中的 test 对应,在使用的时候只需要将 test 改为相应的 name 值 即可。
  4. 最后,在验证不通过时,可以使用 return false 来阻止提交。
  • 发表于 2020-03-29 14:27
  • 阅读 ( 208 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除