layui表单进行多个复选框的非空校验

最新推荐文章于 2024-10-21 19:03:54 发布

编程潜心修炼

最新推荐文章于 2024-10-21 19:03:54 发布

阅读量2.9k

点赞数 1

分类专栏： LayUI

本文链接：https://blog.youkuaiyun.com/weixin_44988848/article/details/107240431

版权

LayUI 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用Layui框架对多个复选框进行非空校验，确保用户至少选择一个选项。通过自定义校验规则fuxuan，在JS中实现校验逻辑并返回错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Layui如何进行多个复选框的非空校验呢？
我们知道，复选框是可选可不选的，它不像单选框，单选框就是必须选一个，那我现在就想实现这个需求，就是要用户必须选一个，不能为空，该怎么办呢？

第一步：在标签中加上lay-verify=“fuxuan”

<div class="myform layui-form">
      <label>爱好：</label>
      <div class="layui-form-item  layui-col-md5 layui-col-md-offset2  layui-col-sm-offset3">
      <input type="checkbox" name="protocol" value="0" id="key_service" lay-skin="primary"  lay-verify="fuxuan" title="足球">
      <input type="checkbox" name="protocol" value="0" id="key_service" lay-skin="primary"  lay-verify="fuxuan" title="乒乓球">
      <input type="checkbox" name="protocol" value="0" id="key_service" lay-skin="primary"  lay-verify="fuxuan" title="篮球">
      </div>
</div>

第二步：在js中自定义校验规则

layui.use(['layer','form','laydate'], function(){
   var form = layui.form,laydate=layui.laydate,layer=layui.layer;
   var $=layui.$;
  
   form.verify({
      passval:[
          /^[\S]{6,12}$/,
         '密码必须6到12位，且不能出现空格'
      ],
      fuxuan:function () {
           var checked=document.getElementById("key_service"); 
           if(checked.checked==false){
               return “请至少选择一个爱好”;
           }
      }
  });
});

总结：就是自定义一个名为fuxuan的校验规则，在里面的函数进行校验，并返回错误信息。