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