JavaScript单文本框存双值及数值区间if-else判断实现方法

单个textbox文本框能否存入两个值 #

可以，原生textbox的value属性本身只接收字符串类型，存两个值通常有两种稳定实现方案：

• 格式拼接方案：两个值用固定特殊分隔符拼接成字符串存入value，比如用不会出现在内容里的逗号、竖线做分隔，存成"张三,28"，取值时用split()方法按分隔符拆分成数组，就能分别拿到两个值。
• 自定义属性方案：一个值存在value里，另一个值存在input标签的data-*自定义属性上，比如<input type="text" id="user" data-age="28" value="张三">，取值时直接通过DOM元素的dataset属性拿自定义属性的值即可，不需要拆分字符串，出错概率更低。

if-else实现18-60年龄区间校验 #

你贴的原有代码存在基础DOM获取问题：直接用id名当变量取value是部分浏览器提供的非标准兼容写法，不推荐使用，很容易出现取值报错，必须先通过getElementById拿到对应DOM元素再取value。
数值范围校验的核心步骤：

1. 拿到输入框的value后，先转成数值类型——input的value默认是字符串，直接和数字比大小会出现逻辑错误
2. 先判断转换后的值是否为有效数字，排除输入非数字的情况
3. 用if-else分支判断数值区间，不在18-60范围内就给出提示、拦截后续逻辑

以下是修正原有代码bug、加入年龄校验的完整可运行示例：

<script>
function greeting() {
  // 修正原有DOM取值问题，先获取元素再取value
  const nameInput = document.getElementById("name");
  const timeInput = document.getElementById("time");
  const ageInput = document.getElementById("age");
  const resultInput = document.getElementById("greeting1");

  const name = nameInput.value.trim();
  const timep = timeInput.value.trim().toUpperCase();
  // 年龄校验逻辑
  const age = Number(ageInput.value.trim());
  // 先判断是否输入了有效数字
  if (isNaN(age)) {
    alert("年龄请输入有效数字");
    return;
  }
  // 再判断区间
  if (age < 18) {
    alert("年龄不得小于18岁");
    return;
  } else if (age > 60) {
    alert("年龄不得大于60岁");
    return;
  }

  // 校验通过后走原有问候逻辑
  let greet;
  if (timep == "M") {
    greet = `${name}，早上好`;
  } else if (timep == "E") {
    greet = `${name}，晚上好`;
  } else {
    alert("时段请输入M或E");
    return;
  }
  resultInput.value = greet;
}       
</script>
<body>
<p>输入姓名：</p> <input type="text" id="name"  />
<p>输入年龄（18-60）：</p> <input type="text" id="age"  />
<p>输入时段 [M/E]（M代表早上，E代表晚上）：</p> <input type="text" id="time"  />
<button onclick="greeting()">提交</button>
<input type="text" id="greeting1" readonly  />
</body>

如果要做实时输入校验，可以给input绑定input事件，在用户输入时就即时判断，不用等点击按钮才校验。

内容的提问来源于stack exchange，提问作者lil rookie