JavaScript文本框驗證啓用按鈕

Question

嘿所以我有兩個文本框和一個按鈕。我只想在「playerName」文本框包含某些內容並且「upperLimit」文本框包含大於0的整數時啓用該按鈕。 我希望按鈕開始禁用，然後在用戶在文本框中鍵入內容時動態更改，不斷檢查內容在文本框中查看是否應激活該按鈕。下面有什麼，我已經試過：

的JavaScript：

var playerNameValid = false; 
var upperLimitValid = false; 


function validatePlayerName() 
{ 
    if (document.getElementById("initialPlayerNameChoice").Value == "") 
    { 
     playerNameValid = false; 
     document.getElementById("startGameButton").disabled = true; 
    } 
    else 
    { 
     playerNameValid = true; 

     if (upperLimitValid == true) 
     { 
      document.getElementById("startGameButton").disabled = false; 
     } 
    } 
} 


function validateUpperLimit() 
{ 
    if (isNaN(document.getElementById("initialUpperLimitChoice").valuetextContent)) 
    { 
     upperLimitValid = false; 
     document.getElementById("startGameButton").disabled = true; 
    } 
    else 
    { 
     upperLimitValid = true; 

     if (playerNameValid == true) 
     { 
      document.getElementById("startGameButton").disabled = false; 
     } 
    } 
} 

標記：

<asp:Label ID="enterNameLabel" runat="server" Text="Enter your name: "></asp:Label> 
<asp:TextBox ID="initialPlayerNameChoice" runat="server"></asp:TextBox> 
<br /><br/> 
<asp:Label ID="enterUpperLimitLabel" runat="server" Text="Enter upper limit: "></asp:Label> 
<asp:TextBox ID="initialUpperLimitChoice" runat="server"></asp:TextBox> 
<br /><br /> 
<asp:Button ID="startGameButton" enabled="false" runat="server" Text="Start Game" /> 

代碼背後：

initialPlayerNameChoice.Attributes.Add("onkeyup", "javascript:validatePlayerName()"); 
    initialUpperLimitChoice.Attributes.Add("onkeyup", "javascript:validateUpperLimit()"); 

Answer 1

你幾乎得到了它。還有就是你需要在你的代碼來解決的幾行：

if (document.getElementById("initialPlayerNameChoice").Value == "") 
//In JavaScript there is no property called 'Value' -----^ use 'value' instead: 
if (document.getElementById("initialPlayerNameChoice").value == "") 


if (isNaN(document.getElementById("initialUpperLimitChoice").valuetextContent)) 
//Again, in JavaScript there is no property called 'valuetextContent' ---^ 
//Furthermore, 0 is a number, so if you kept this, the button would enable on 0 
//You can use a regular expression to make sure it is a number > 0, and 
//re-arranging your function eliminates re-checking of logic: 
function validateUpperLimit() 
{ 
    var num = document.getElementById("initialUpperLimitChoice").value.match(/^\d+$/); 
    if(num && num[0] > 0) 
    { 
    upperLimitValid = true; 

    if (playerNameValid == true) 
    { 
     document.getElementById("startGameButton").disabled = false; 
    } 
    } 
    else 
    { 
    upperLimitValid = false; 
    document.getElementById("startGameButton").disabled = true; 
    } 
} 

，你可以實現在只具有validate()功能，併兼具領域稱之爲onkeyup另一種解決方案。如果您更改了驗證函數以返回true或false，則可以消除全局變量的使用，並且邏輯更有意義。

function validate(){ 
    if(validatePlayerName() && validateUpperLimit()) 
    document.getElementById('startGameButton').disabled = false; 
    else 
    document.getElementById('startGameButton').disabled = true; 
} 

function validatePlayerName(){ 
    if(document.getElementById('initialPlayerNameChoice').value != '') 
    return true; 
    else 
    return false; 
} 

function validateUpperLimit(){ 
    var num = document.getElementById('initialUpperLimitChoice').value.match(/^\d+$/); 
    if(num && num[0] > 0) 
    return true; 
    else 
    return false; 
} 

然後代替你onkeyup代碼（我不認爲你需要的javascript:一部分，但我不能完全確定，所以如果它吠叫你，只是把它放回）：

initialPlayerNameChoice.Attributes.Add("onkeyup", "validate()"); 
initialUpperLimitChoice.Attributes.Add("onkeyup", "validate()");