我正在尝试使用基本验证码制作表单。目前，因为我是一个新手 HTML 编码器，所以我只在用户单击验证按钮时启用了提交按钮（当它看到返回 true 时它不会启用它自己。）我正在努力做到这一点，如果它返回return true 我想让按钮启用，并在其他时间禁用。这是代码的链接：https://codepen.io/pen/GRpVmve
如果有人提供帮助，我将不胜感激。
【问题讨论】：
标签： javascript html forms captcha
删除按钮验证按钮并添加到输入oninput功能
function Check(){
document.getElementById("button2").disabled = true;
if(ValidCaptcha()){
document.getElementById("button2").disabled = false;
}
}
function Captcha(){
var alpha = new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
var i;
for (i=0;i<6;i++){
var a = alpha[Math.floor(Math.random() * alpha.length)];
var b = alpha[Math.floor(Math.random() * alpha.length)];
var c = alpha[Math.floor(Math.random() * alpha.length)];
var d = alpha[Math.floor(Math.random() * alpha.length)];
var e = alpha[Math.floor(Math.random() * alpha.length)];
var f = alpha[Math.floor(Math.random() * alpha.length)];
var g = alpha[Math.floor(Math.random() * alpha.length)];
}
var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g;
document.getElementById("mainCaptcha").value = code;
Check()
}
function ValidCaptcha(){
var string1 = removeSpaces(document.getElementById('mainCaptcha').value);
var string2 = removeSpaces(document.getElementById('txtInput').value);
if (string1 == string2){
return true;
}
else{
return false;
}
}
function removeSpaces(string){
return string.split(' ').join('');
}<form action="https://www.w3schools.com/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<h3>Gender</h3>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
<body onload="Captcha();">
<table>
<tr>
<h3>
Captcha<br />
</td>
</tr>
<tr>
<td>
<input type="text" id="mainCaptcha" disabled/>
<input type="button" id="refresh" value="Refresh" onclick="Captcha();" />
</td>
</tr>
<tr>
<td>
<input type="text"oninput="Check()" name="captcha" id="txtInput"/>
</td>
</tr>
<tr>
<td>
<input type="submit" id="button2" value="Send" disabled>
</td>
</tr>
</table>
</body>
</form> 【讨论】：
我认为这对你有用...
window.onload=()=>{
document.getElementById('button2').disabled = true;
let text = document.getElementById('txtInput').value;
Captcha();
}
function Captcha(){
var alpha = new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
for (i=0;i<6;i++){
var a = alpha[Math.floor(Math.random() * alpha.length)];
var b = alpha[Math.floor(Math.random() * alpha.length)];
var c = alpha[Math.floor(Math.random() * alpha.length)];
var d = alpha[Math.floor(Math.random() * alpha.length)];
var e = alpha[Math.floor(Math.random() * alpha.length)];
var f = alpha[Math.floor(Math.random() * alpha.length)];
var g = alpha[Math.floor(Math.random() * alpha.length)];
}
var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g;
document.getElementById("mainCaptcha").value = code
}
function ValidCaptcha(){
var string1 = removeSpaces(document.getElementById('mainCaptcha').value);
var string2 = removeSpaces(document.getElementById('txtInput').value);
if (string1 == string2){
document.getElementById('button2').disabled = false;
}
else{
document.getElementById('button2').disabled = true;
}
}
function removeSpaces(string){
return string.split(' ').join('');
}
function check(x){
if(x.length<7 || x.length>7){
document.getElementById('button2').disabled = true;
}
}<form action="https://www.w3schools.com/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<h3>Gender</h3>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
<body onload="Captcha();">
<table>
<tr>
<h3>
Captcha<br />
</td>
</tr>
<tr>
<td>
<input type="text" id="mainCaptcha" disabled/>
<input type="button" id="refresh" value="Refresh" onclick="Captcha();" />
</td>
</tr>
<tr>
<td>
<input type="text" id="txtInput" onkeyup="check(this.value)"/>
</td>
</tr>
<tr>
<td>
<input id="button1" type="button" value="Verify" onclick="ValidCaptcha()">
<input type="submit" id="button2" value="Send">
</td>
</tr>
</table>
</body>
</form> 【讨论】：