JavaScript文本框验证启用按钮
嘿,我有两个文本框和一个按钮。我只想在“playerName”文本框包含内容且“upperLimit”文本框包含大于0的整数时启用该按钮。 我希望该按钮开始禁用,然后随着用户在文本框中键入内容而动态更改,不断检查文本框中的内容,以查看是否应激活该按钮。以下是我尝试过的: JavaScript:JavaScript文本框验证启用按钮,javascript,asp.net,webforms,Javascript,Asp.net,Webforms,嘿,我有两个文本框和一个按钮。我只想在“playerName”文本框包含内容且“upperLimit”文本框包含大于0的整数时启用该按钮。 我希望该按钮开始禁用,然后随着用户在文本框中键入内容而动态更改,不断检查文本框中的内容,以查看是否应激活该按钮。以下是我尝试过的: JavaScript: var playerNameValid = false; var upperLimitValid = false; function validatePlayerName() { if (do
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" />
你几乎成功了。代码中只有几行需要修复:
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:
部分,但我不完全确定,如果它对你咆哮,就把它扔回去):
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;
}
initialPlayerNameChoice.Attributes.Add("onkeyup", "validate()");
initialUpperLimitChoice.Attributes.Add("onkeyup", "validate()");