Question

我知道现场有2-3个类似的问题，但是我的问题非常具体。因此，情况是，我创建了一个输入字段，如果它匹配/ abc /模式（JavaScript中的正则表达式），则会验证该字符串。但是输出是非常出乎意料的，即，即使我提供的输入与模式匹配，输出也将是“无效输入”，并且如果我提供的输入与模式不匹配，输出也将与输出相同。可以，但是我无法弄清楚提供有效输入时发生了什么情况？

代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>form validation</title>
</head>
<body>

<script>
function check() {
  var field = document.getElementById("1").data;
  var regex = /abc/;
  if(regex.test(field) === true)
     document.getElementById("2").innerHTML="Input accepted";

  else
   document.getElementById("2").innerHTML="Invalid input!";
}
</script>
  First field:<br />
  <input type="text" id="1"> <span id="2"></span> <br />
  <button type="submit" onclick="check();">Validate</button>

</body>

</html>

Answer 1

document.getElementById("1").data

这不是有效的方法。您必须使用值方法来获取输入框中的数据。尝试以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>form validation</title>
</head>
<body>

<script>
function check() {
  var field = document.getElementById("1").value;
  var regex = /abc/;
  if(regex.test(field) === true)
     document.getElementById("2").innerHTML="Input accepted";

  else
   document.getElementById("2").innerHTML="Invalid input!";
}
</script>
  First field:<br />
  <input type="text" id="1"> <span id="2"></span> <br />
  <button type="submit" onclick="check();">Validate</button>

</body>

</html>

PS：请务必使用浏览器提供的一些调试工具。

Answer 2

尝试使用.value代替.data

<script>
function check() {
  var field = document.getElementById("1").value; //<--- here
  var regex = /abc/;
  if(regex.test(field) === true)
     document.getElementById("2").innerHTML="Input accepted";

  else
   document.getElementById("2").innerHTML="Invalid input!";
}
</script>

现在，如果您输入“ abc”，它将起作用。

使用JavaScript验证HTML表单

2 个答案: