温度转换工具输入验证异常：/^\d+$/.test无法识别含字母的数字输入

我正在开发一款实现摄氏度与华氏度互转的网站，尝试用isNaN和/^\d+$/.test()做输入验证，确保输入不含字母，但当前代码存在问题：输入前缀为数字、后缀含字母（如5a）时仍会执行计算，只有输入前缀为字母（如a5）时才会触发提示。求解决方法：只要输入字符串中包含任何字母就阻止代码运行，也欢迎提供替代验证方案。

现有代码 #

HTML代码 #

<head>
<meta charset="utf-8">
<title>Convert Temperatures</title>
<link rel="stylesheet" href="styles.css">
<script src="convert_temp.js"></script>
</head>

<body>
<main>
<h1>Convert temperatures</h1>    
<input type="radio" name="conversion_type" id="to_celsius" checked>Fahrenheit to 
Celsius<br>
<input type="radio" name="conversion_type" id="to_fahrenheit">Celsius to 
Fahrenheit<br><br>
<label id="degree_label_1">Enter F degrees:</label>
<input type="text" id="degrees_entered" ><br>
<label id="degree_label_2">Degrees Celsius:</label>
<input type="text" id="degrees_computed" disabled><br>
<label>&nbsp;</label>
<input type="button" id="convert" value="Convert" /><br>   
</main>
</body>
</html>

JavaScript代码 #

var $ = function(id) { return document.getElementById(id); };
var clearTextBoxes = function() {
$("degrees_entered").value = "";
$("degrees_computed").value = "";
};

var toFahrenheit = function() {
$("degree_label_1").innerHTML = "Enter C degrees:";
$("degree_label_2").innerHTML = "Degrees Fahrenheit:";
clearTextBoxes();
document.getElementById("degrees_entered").focus();
};

var toCelsius = function() {
$("degree_label_1").innerHTML = "Enter F degrees:";
$("degree_label_2").innerHTML = "Degrees Celsius:";
clearTextBoxes();
document.getElementById("degrees_entered").focus();
};

var convertTemp = function() {
var degrees = parseFloat(document.getElementById("degrees_entered").value);
var answer;

if (/^\d+$/.test(degrees)){
    
    if($("to_fahrenheit").checked){
    answer = degrees * (9/5) + 32;
    $("degrees_computed").value = answer.toFixed(0);
    }
    else {
    answer = (degrees -32) * (5/9);
    $("degrees_computed").value = answer.toFixed(0);
    }
    
    }
    else{
    alert("You must enter a valid number for degrees.");
    }
   };

 window.onload = function() {
$("convert").onclick = convertTemp;
$("to_celsius").onclick = toCelsius;
$("to_fahrenheit").onclick = toFahrenheit;
$("degrees_entered").focus();
};

问题原因 #

现有代码先调用parseFloat处理输入值，当输入5a这类内容时，parseFloat会提取开头的有效数字5并返回，后续用正则测试这个数字自然会通过验证，导致错误执行计算。核心问题是先解析数值再验证，应该先验证原始输入字符串的合法性，再进行数值解析。

解决方案 #

方案1：修正现有验证逻辑 #

先获取原始输入字符串，用正则验证其是否为纯数字（支持整数、小数和负号，因为温度可能为负数），验证通过后再解析为数值进行计算。

修改后的convertTemp函数：

var convertTemp = function() {
  // 获取原始输入并去除首尾空格
  var inputStr = document.getElementById("degrees_entered").value.trim();
  var degrees;
  var answer;

  // 正则匹配：可选负号 + 整数部分 + 可选的小数部分
  if (/^-?\d+(\.\d+)?$/.test(inputStr)) {
    degrees = parseFloat(inputStr);
    if ($("to_fahrenheit").checked) {
      answer = degrees * (9/5) + 32;
      $("degrees_computed").value = answer.toFixed(0);
    } else {
      answer = (degrees - 32) * (5/9);
      $("degrees_computed").value = answer.toFixed(0);
    }
  } else {
    alert("请输入有效的温度数值，不能包含字母或其他非数字字符。");
    $("degrees_entered").focus();
  }
};

方案2：使用HTML5原生数字输入框 #

将输入框类型改为type="number"，浏览器会自动拦截大部分非数字输入，结合isNaN做二次验证即可，代码更简洁。

步骤1：修改HTML输入框

将原来的<input type="text" id="degrees_entered" >改为：

<input type="number" id="degrees_entered" step="0.1">

step="0.1"允许输入小数，可根据需求调整。

步骤2：修改JavaScript验证逻辑

var convertTemp = function() {
  var inputVal = document.getElementById("degrees_entered").value;
  var degrees = parseFloat(inputVal);
  var answer;

  if (!isNaN(degrees)) {
    if ($("to_fahrenheit").checked) {
      answer = degrees * (9/5) + 32;
      $("degrees_computed").value = answer.toFixed(0);
    } else {
      answer = (degrees - 32) * (5/9);
      $("degrees_computed").value = answer.toFixed(0);
    }
  } else {
    alert("请输入有效的温度数值。");
    $("degrees_entered").focus();
  }
};

注意：部分浏览器允许输入e（科学计数法），如果需要完全禁止，可结合方案1的正则做补充验证。

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