摘要：
近日由于项目原因使用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>
还没有评论，来说两句吧...