Question

所以我们的目标是创建一个非常简单的两个字段表单并使用javascript来验证在任一字段中只输入数值。

我的代码有两个问题：只有后续函数的else条件似乎才会执行。更令人困惑的是，当字段为空时，它也会执行只是单击其他字段。

请帮忙吗？

Javascript：

// 1. Validate that only a numeric value is entered

function validateMin() {

  var min = document.getElementById("min").value;

  if (isNaN(min)) {

    var el1 = document.getElementById("valFailMin");
    el1.textContent = "Ok";

  } else {

    var el1 = document.getElementById("valFailMin");
    el1.textContent = "Only numbers";

  }  

}


function validateMax() {

  var max = document.getElementById("max").value;

  if (isNaN(max)) {

    var el2 = document.getElementById("valFailMax");
    el2.textContent = "Ok";

  } else { 

    var el2 = document.getElementById("valFailMax");
    el2.textContent = "Only numbers please";

  }  

}

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>

    <div class="myForm">
      <label for="min">Min</label><input id="min" type="number" placeholder="Type a min value" onblur="validateMin()"/><br>

      <span id="valFailMin"></span>
    </div>

    <div class="myForm">
      <label for="max">Max</label><input id="max" type="number" placeholder="Type a max value" onblur="validateMax()" /><br>

      <span id="valFailMax"></span>
    </div>  

    <div id="valSuccess"></div>

</body>

<script src="validate.js"></script>
</html>

Answer 1

isNaN()返回true，如果选中的值不是数字，如果是数字，则返回值为false。在检查之前，参数也是internally coerced到一个数字。在此强制中，空字符串将计算为0，这是一个数字，因此检查返回false。

修复方法是在条件中添加一个not运算符并检测空值：

if (!isNaN(min) && min !== '') {...}

检查变量是否为数字的一般方法：

var isNumber = (!isNaN(+variable) && isFinite(+variable));

Answer 2

在你的功能中：

if (isNaN(min)) {
  var el1 = document.getElementById("valFailMin");
  el1.textContent = "Ok";

isNaN 如果值不是数字则返回true，因此返回“Ok”，其中 min 不是数字。根据您所使用的数字类型，正则表达式可能更合适：

if (/^\d+\.?\d*$/.test(min)) {
  // min is an integer or float
}

对于像'5'或'12 .3'这样的值，这将返回true，但对于像'1.23e4'这样的有效数字则返回false。

数字验证功能应与验证字段的功能分开，因此：

function validNumber (value) {
  return /^\d+\.?\d*$/.test(value);
}

然后验证可以是：

function validateNumberField(el) {
  var errField = document.getElementById(el.id + 'Err');
  errField.textContent = validNumber(el.value)? 'Ok' : 'Fail';
}

如果从侦听器传递 this 并将正在检查的输入的id（或名称）链接到其相关的错误字段。

一些标记（简化发布）：

Min<input id="min" type="number" placeholder="Type a min value"
onblur="validateNumberField(this)"><br>
<span id="minErr" style="color:red"></span><br>

Max<input id="max" type="number" placeholder="Type a max value"
onblur="validateNumberField(this)"><br>
<span id="maxErr" style="color:red"></span>

您可能希望允许空值并删除前导和尾随白色。

Javascript号验证功能起作用+建设性批评通缉

2 个答案: