Layui表单复选框验证

近日由于项目原因使用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>

效果如图所示：

Layui表单复选框验证相关推荐

php中得到复选框的数据的代码,表单复选框向PHP传输数据的代码
表单复选框向PHP传输数据的代码表单复选框就是checkbox 1.checkbox的应用复制代码代码如下: 2.由于我传输的是在php循环中产生的数组,因此value也要设成变量: for($ ...
JS对象迭代、事件处理器、表单控件绑定、表单复选框、表单单选按钮
JS对象迭代知识点 v-for v-for 循环JS对象,把对象内容循环显示到页面上. <div id="myApp"><h1>JS对象迭代</h1 ...
html构建复选框标签,什么标签用于在表单中构建复选框_HTML表单复选框INPUT标签...
HTML表单复选框标签在HTML的表单控件中,复选框也是经常使用的控件,它可以让用户选择打勾或不打勾.它使用的也是标签. 一.定义标签用于表示文本框.密码框.单选框.复选框.文件上传框.普通按钮. ...
表单复选框提交到mysql_使用表单复选框设置Access数据库表字段
这样做的一种方法是在Access中使用VBA.在Access中访问VBA控制台的方式是,在表单的设计视图中,右键单击复选框控件并选择" Build Event"从菜单中.确保您的控 ...
ICheck表单复选框、单选框控件美化插件
作用: 渲染并美化当前页面的复选框或单选框响应复选框或单选框的点击事件特点: 在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括桌面和移动设备支持触摸设备 - iOS.Android ...
html表单复选框隐藏,ElementUI 表格部分复选框禁用或隐藏
背景我们在使用 element ui 的 Table 组件构建带复选框的表格时,我们希望根据条件禁用或者隐藏某行选择框.如下图所示: 解析通过查看 ElementUI 官方文档 selectabl ...
javaWeb表单复选框
目录 HTML代码 JSP代码如果用户名那不输入直接提交相应对象获取的就是空串如果复选框不选直接提交相应对象获取的就是NULL 容易产生空指针异常 HTML代码 <html> & ...
html表单复选框样式,美化表单——自定义checkbox和radio样式
如果你对本站比较观注的话,应该很清楚,前面就有这方面的介绍.因为大家都知道表单中的部分元素如果单单使用CSS是没办法完成的,所以最近花全力在学习这方面的制作.在本站有关于这样制作有好几个教程了,比如说 ...
html 勾选框整体勾选,html勾选框_html5实现表单的复选框验证
摘要腾兴网为您分享:html5实现表单的复选框验证,中日翻译,携程,悟空识字,天气预报等软件知识,以及寻仙答题器,山东省民生警务平台,买车168,关键词优化精灵,文件拷贝工具,自动壁纸,语音播报软件 ...

Layui表单复选框验证

Layui表单复选框验证

Layui表单复选框验证相关推荐

最新文章

热门文章