Javascript條件：實時驗證

Question

誰能幫我解決我的JavaScript問題。

情況就是這樣。

當我輸入9位數字時，標簽應該變成紅色。 但是，如果該字段為空並且我輸入了10位數字，則標簽應變為藍色。 我很難解決這個問題。

 function validateField(testField) { var reg2 = /^([\\d])/; if(testField.value.length > 0) { if(reg2.test(testField) == false) { document.getElementById("testlabel").style.color="red" return false; } else { document.getElementById("testlabel").style.color="black" return true; } } else { document.getElementById("testlabel").style.color="blue"; return true; } } 

 <label id="testlabel">Test101: </label> <input name="txtNum" type="text" id="Num" pattern=".{10,}" minlength="10" maxlength="10" onblur="validateField(this);" > 

Answer 1

您的代碼有多個問題

1. 正則表達式 -如果您只需要驗證正則表達式是否包含10位數字，則可以使用正則表達式\\d{10} 。 您的Regex ^([\\d])僅與字符串開頭的數字匹配。

2. reg2.test(testField)應該更改為reg2.test(testField.value) ，您正在嘗試比較TextBox值而不是文本框本身。

 function validateField(testField) { var reg2 = /\\d{10}/; if(testField.value.length > 0) { if(reg2.test(testField.value) == false) { document.getElementById("testlabel").style.color="red" return false; } else { document.getElementById("testlabel").style.color="blue" return true; } } else { document.getElementById("testlabel").style.color="black"; return true; } } 

 <label id="testlabel">Test101: </label> <input name="txtNum" type="text" id="Num" pattern=".{10,}" minlength="10" maxlength="10" onblur="validateField(this);" >