本文作者:DurkBlue

Layui表单复选框如何进行验证不为空

DurkBlue 11个月前 ( 02-29 ) 197 抢沙发
Layui表单复选框如何进行验证不为空摘要: 近日由于项目原因使用layui框架进行开发,在做表单验证的时候苦于复选框验证问题找不到答案,于是作为小白的我换了一种思路,不采用官方提供的form-verify,而是采用在提交表单...

近日由于项目原因使用layui框架进行开发,在做表单验证的时候苦于复选框验证问题找不到答案,于是作为小白的我换了一种思路,不采用官方提供的form-verify,而是采用在提交表单的时候进行判断,由此来对复选框进行验证。本文在于提供一种验证思路。

官方form示例(包含验证):https://www.layui.com/demo/form.html

示例代码如下:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript" src="./layui/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="./layui/layui.js"></script>
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
<style type="text/css">
.layui-form-checkbox {
width: 95%;
}
</style>
</head>
<body>
<form class="layui-form" action="" lay-filter="">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="inputBlock" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  
  
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input class="chk" type="checkbox" name="testchk1" lay-skin="primary" value="1" title="测试 1">
      <input class="chk" type="checkbox" name="testchk2" lay-skin="primary" value="2" title="测试 2">
      <input class="chk" type="checkbox" name="testchk3" lay-skin="primary" value="3" title="测试 3">
    </div>
  </div>
 
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit="" lay-filter="test">立即提交</button>
    </div>
  </div>
</form>
<script type="text/javascript">
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form,
  layer = layui.layer,
  testArr = [];
  form.verify({
    inputBlock: function(value){// 可以使用verify对表单的单选框,下拉框,文本框等进行提交验证
     if(value.length < 2){
        return '标题不得少于2个字符';
      }
    }
    });
    form.on('submit(test)', function(data){// 根据选中的复选框对应的值存成数组判断数组长度代替验证
    for( i = 1;  i<4 ; i++){
    if(data.field['testchk'+i] != "" && data.field['testchk'+i] != null && data.field['testchk'+i] != undefined){
    testArr.push(data.field['testchk'+i]);
    }
    
    }
    if(testArr > 0 ){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    });
    return true;
    }else{
    layer.msg('您还未选择复选框',{
    time: 10000
    });
    return false;
    }
    
  });
  });
</script>
</body>
</html>


此篇文章由DurkBlue博主亲自发布,转载请注明来处哟
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 11个月前 ( 02-29 )
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论取消回复

快捷回复:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog

评论列表 (暂无评论,197人围观)参与讨论

还没有评论,来说两句吧...