javascript - 使用 javascript 进行简单的表单验证

Question

我正在尝试创建一个简单的 HTML 表单，并且我想使用 javascript 来验证值。
这是表单标签:

<form action="" onSubmit="return formValidation();" method="Post" name="form">

以下是 HTML 表单的一部分:

<label for="text">my text:</label>
<input type="text" name="text">
<div id="error"></div>
<input type="submit" value="submit">

& 这是 formValidation() 函数:

function formValidation() {
   var mytext=document.form.text;
   if (textValidation(mytext, 3, 20)) {

   }
   return false;
}

&这是textValidation()代码:

function textValidation(txt, mn, mx) {
     var txtlen = txt.value.length;
     if (textlen == 0 || txtlen <=mn || txtlen > mx ) {
           document.getElementById('error').innerHTML = '<h6 style="color: red;">text is invalid</h6>';
            return false;
            }
      return true;
}

问题是当我输入无效文本时，它会显示错误，但再次点击提交按钮没有效果，即使我更改了文本。
我使用过 alert() 并且效果很好。
我做错了什么？

Answer 1

您正在设置错误文本，但没有清除它，因此它会一直存在。另外，您必须在 formValidation 函数的 if 语句中返回 true，否则它将始终返回 false。

您可以像这样清除消息:

function textValidation(txt, mn, mx) {
  var txtlen = txt.value.length;
  if (textlen == 0 || txtlen <=mn || txtlen > mx ) {
    document.getElementById('error').innerHTML = '<h6 style="color: red;">text is invalid</h6>';
    return false;
  }
  document.getElementById('error').innerHTML = "";
  return true;
}

由于 formValidation 始终返回 false，因此它永远不会允许表单提交。这对于测试你的 JS 来说很好，但是稍后你会想要使用这样的东西:

function formValidation() {
  var mytext=document.form.text;
  if (textValidation(mytext, 3, 20)) {
    return true;
  }
  return false;
}