如何在HTML body标签内判断input标签空值并使用IF逻辑

架构老林

2026-7-3

两种场景下的实现方案

一、后端模板渲染场景（如ASP.NET Razor、PHP等）

如果你的@if是后端模板引擎语法，核心是在页面渲染前基于后端传入的变量值判断，而非前端实时响应。假设office_id是后端传递的变量，判断逻辑需检查该变量是否为空字符串或null：

@if (!string.IsNullOrEmpty(office_id))
{
    <div>update code</div>
}
else
{
    <div>store code</div>
}

<div>
    <!-- 将后端变量值绑定到input -->
    <input id="office_id" class="myform-control" value="@office_id">
</div>

如果是PHP环境，语法调整为：

<?php if (!empty($office_id)): ?>
    <div>update code</div>
<?php else: ?>
    <div>store code</div>
<?php endif; ?>

<div>
    <input id="office_id" class="myform-control" value="<?php echo $office_id; ?>">
</div>

二、前端实时判断场景（JavaScript）

如果需要随用户输入动态切换HTML内容，需用JavaScript监听input的输入事件，实时更新DOM：

1. HTML结构

<!-- 承载动态切换内容的容器 -->
<div id="dynamic-content">
    <div>store code</div>
</div>

<div>
    <!-- 绑定输入事件触发检查逻辑 -->
    <input id="office_id" class="myform-control" oninput="checkInputValue()">
</div>

2. JavaScript逻辑

function checkInputValue() {
    const input = document.getElementById('office_id');
    const contentContainer = document.getElementById('dynamic-content');
    
    // 去除首尾空白后判断是否为空，避免纯空格被误判
    if (input.value.trim() !== '') {
        contentContainer.innerHTML = '<div>update code</div>';
    } else {
        contentContainer.innerHTML = '<div>store code</div>';
    }
}

// 页面加载完成后执行一次，确保初始状态正确
window.addEventListener('load', checkInputValue);