JavaScript表单验证与问候功能无法同时实现问题求助

把验证和问候功能合并到一个函数中，就能同时实现两个需求，具体修改如下：

function handleUserName() {
  // 统一获取输入框的值，确保选择器一致（根据你的实际DOM结构调整，这里以id为name1的输入框为例）
  var username = document.getElementById('name1').value;
  // 空值验证（包含纯空格的情况）
  if (!username || username.trim() === "") {
    alert("请输入用户名，不能为空！");
    return false; // 验证失败，终止后续操作
  }
  // 验证通过后显示问候消息
  document.getElementById('outputDiv').innerHTML = `Hello ${username}, Welcome to Livewell page<br> You are officially a livewell member ${username}!`;
  return true; // 若绑定表单提交事件，返回true允许提交；非表单场景可省略
}

关键改动说明 #

• 合并逻辑：将验证和问候放在同一个函数内，避免触发时机冲突
• 统一选择器：确保获取用户名的方式一致，避免因DOM选择器不同导致值不一致
• 严谨的空值判断：过滤纯空格输入，提升验证准确性
• 流程控制：验证失败时终止流程，验证通过后才执行问候显示

触发方式调整 #

只需将按钮或表单的事件绑定到这个合并后的函数即可：

• 按钮点击触发：<button onclick="handleUserName()">提交</button>
• 表单提交触发：<form name="register" onsubmit="return handleUserName()">

内容的提问来源于stack exchange，提问作者chris medina