使用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

你可以写形式验证功能，这样

function formValidation() { 
var mytext=document.form.text; 
//if the variable boolval is initialized inside double quotes it is string now it is bool variable 
var boolval=false; 
if (textValidation(mytext, 3, 20)) { 
boolval=true; 
} 
return boolval; 
} 

如果textvalidation是真，那么它将初始化true to boolval或者这个函数会返回boolval false，因为我们之前初始化了[这是默认的]

Answer 2

无论条件语句的结果如何，函数formValidation()都将返回false。

考虑您的代码，在某些方面纠正：

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

    } 
    return false; 
} 

如果函数textValidation(mytext, 3, 20)是假的，formValidation()返回false。如果textValidation(mytext, 3, 20)为真，那么... if语句的主体将执行，它是空的，然后formValidation返回false。

此外，在代码中还有许多不匹配的括号和其他与语法相关的问题。由于Javascript本质上是灵活的，所以在实践中你可能会错过这些东西。我建议使用JSHint来验证和改进Javascript代码的一般质量和设计。

Answer 3

你正在设置错误文本，但你不清除它，所以它只是坚持。此外，你必须在你的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; 
}