需求,当提交表单的时候,如果要验证的字段为空,则弹出提示框提示请完善表单信息,并且 return;不执行下一步。
代码语言:javascript复制<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group">
<label>名称 <em style="color: red;">*</em></label>
<div class="">
<input type="text" class="form-control" id="signName" maxlength="16"></input>
</div>
</div>
<div class="form-group">
<label>开始时间 <em style="color: red;">*</em></label>
<div>
<input type="text" class="form-control" id="beginTime" value="9:00" name="1"></input>
</div>
</div>
<div class="form-group">
<label>结束时间 <em style="color: red;">*</em></label>
<div>
<input type="text" class="form-control" id="endTime" value="17:30" name="1"></input>
</div>
</div>
<div class="form-group">
<label>周期选择 <em style="color: red;">*</em></label>
<div class="col-md-9 col-sm-9 col-xs-9">
<label><input name="circle" type="checkbox" value="2" checked='checked'/>周一</label>
<label><input name="circle" type="checkbox" value="3" checked='checked'/>周二</label>
<label><input name="circle" type="checkbox" value="4" checked='checked'/>周三</label>
<label><input name="circle" type="checkbox" value="5" checked='checked'/>周四</label>
<label><input name="circle" type="checkbox" value="6" checked='checked'/>周五</label>
<label><input name="circle" type="checkbox" value="7" checked='checked'/>周六</label>
<label><input name="circle" type="checkbox" value="1" checked='checked'/>周日</label>
</div>
</div>
<button type="button" class="btn blue" id="addBtn">保存</button>
<!-- 弹框 -->
<script src="https://cdn.bootcss.com/layer/2.2/layer.js"></script>
<script src="https://cdn.bootcss.com/layer/2.2/extend/layer.ext.js"></script>
<script type="text/javascript">
$("#addBtn").on("click", function() {
//验证字段
if(validate()) {
layer.msg('请完善表单信息', { icon: 5, time: 1000 });
return;
}
//验证
function validate() {
if($("#signName").val() == '') {
return true;
}
if($("#beginTime").val() == '') {
return true;
}
if($("#endTime").val() == '') {
return true;
}
if(getCircle() == '') {
return true;
}
return false;
}
})
</script>
</body>
</html>