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

DurkBlue3个月前 ( 02-29 )45抢沙发
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博主亲自发布,转载请注明来处哟

分享到:
0
赞(0

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

支付宝扫一扫打赏

微信扫一扫打赏

发表评论取消回复

快捷回复:

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