zoukankan      html  css  js  c++  java
  • 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>
    
    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 来阻止提交。
  • 相关阅读:
    计算机网络基础
    OA项目(MVC项目)
    修改XML的节点内容
    项目实战-电商(网上书城)
    DataTables ajax bootstrap 分页/搜索/排序/常见问题
    DNS服务器解析域名的过程
    bootstrap 模态框
    QuickChm 制作chm文档 chm文档脚本错误,乱码
    poi 读取word文档
    commons -lang(2) RandomStringUtils RandomUtils
  • 原文地址:https://www.cnblogs.com/Super-Lee/p/12587721.html
Copyright © 2011-2022 走看看