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()");