根据select下拉框值判断验证条件
根据select下拉框值判断当前选中的是哪个区域，并且判断当前选中区域里面的值是否为空，如果为空，则弹出弹框提示，请输入xx区域名称，以下只是一个小demo,随手复制黏贴到代码里面，能看的更加明白。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<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>
<style>
</style>
</head>
<body>
<form id="dialogForm" class="form-horizontal">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="col-md-4 col-sm-4 col-xs-4 control-label">围栏类型 <em style="color: red;">*</em>
</label>
<div class="col-md-7 col-sm-7 col-xs-7">
<select size="1" name="type" id="type"
class="form-control select2">
<option value="1">统计区域</option>
<option value="2">滞留区域</option>
<option value="3">危险区域</option>
</select>
</div>
</div>
</div>
</div>
<!-- 统计区域 -->
<div id="shouhou1">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="col-md-4 col-sm-4 col-xs-4 control-label">统计区域名称 <em style="color: red;">*</em></label>
<div class="col-md-7 col-sm-7 col-xs-7">
<input type="text" class="form-control " id="areaname1">
<div class="areacont">请输入区域名称</div>
</div>
</div>
</div>
</div>
</div>
<!--滞留区域-->
<div id="shouhou2" style="display: none;">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="col-md-4 col-sm-4 col-xs-4 control-label">滞留区域名称</label>
<div class="col-md-7 col-sm-7 col-xs-7">
<input type="text" class="form-control " id="areaname2">
</div>
</div>
</div>
</div>
</div>
<!--危险区域-->
<div id="shouhou3" style="display: none;">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="col-md-4 col-sm-4 col-xs-4 control-label">危险区域名称</label>
<div class="col-md-7 col-sm-7 col-xs-7">
<input type="text" class="form-control " id="areaname3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<button type="button" class="btn blue" id="addBtn">保存</button>
</body>
<script>
/* 下拉框选择 */
$("#type").change(function() {
if ($(this).val() == 1) {// 统计
$("#shouhou1").show();
$("#shouhou2").hide();
$("#shouhou3").hide();
Dbtype = 'region_fence';
} else if ($(this).val() == 2) {// 滞留
$("#shouhou2").show();
$("#shouhou1").hide();
$("#shouhou3").hide();
Dbtype = 'detain_fence';
} else if ($(this).val() == 3) {// 危险
$("#shouhou3").show();
$("#shouhou1").hide();
$("#shouhou2").hide();
Dbtype = 'danger_fence';
}
// 清空字段
clearValues();
})
$("#addBtn").on("click", function() {
var typeVal = $('#type').val()
// 特殊部分检验
if(typeVal === '1'){
// 执行统计区域校验
if(!$('#areaname1').val()){ // 如果这个值为空 ！空就是true就会执行
return alert('请输入统计区域名称')
}
}else if(typeVal === '2'){
// 执行统计滞留区域
if(!$('#areaname2').val()){
return alert('请输入滞留区域名称')
}
}else if(typeVal === '3'){
// 执行统计危险区域
if(!$('#areaname3').val()){
return alert('请输入危险区域名称')
}
}
// 公用部分检验
})
</script>
</html>原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.07.29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读