个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
<html>
<body>
<form action="Send_Contact_Us.php" method="post" onSubmit="return checkform(this);">
<label>Name</label>
<input name="name" type="text" required="required" />
<label>Email</label>
<input name="mail" type="email" required="required" />
<label>Phone</label>
<input type="text" name="phone" pattern="[789][0-9]{9}" required="required" />
<label>Comments</label>
<textarea name="comment" rows="3" cols="20" required="required"></textarea>
<label for="code">Write code below <span id="txtCaptchaDiv" style="color:#F00"></span>
<!-- this is where the script will place the generated code -->
<br/>
<input type="hidden" id="txtCaptcha" />
</label>
<input type="text" name="txtInput" id="txtInput" size="30" onfocus="validatePass(document.getElementById('txtCaptcha'), this);" oninput="validatePass(document.getElementById('txtCaptcha'), this);" />
<input type="submit" />
</form>
</body>
</html>
这是我想使用 JavaScript 在文本字段上方生成代码的表单代码。
最佳答案
<html>
<head>
<script type="text/javascript">
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','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
}
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('');
}
</script>
</head>
<body onload="Captcha();">
<table>
<tr>
<td>
Text Captcha<br />
</td>
</tr>
<tr>
<td>
<input type="text" id="mainCaptcha"/>
<input type="button" id="refresh" value="Refresh" onclick="Captcha();" />
</td>
</tr>
<tr>
<td>
<input type="text" id="txtInput"/>
</td>
</tr>
<tr>
<td>
<input id="Button1" type="button" value="Check" onclick="alert(ValidCaptcha());"/>
</td>
</tr>
</table>
</body>
</html>
这是示例代码。这是纯文本(仅限文字)验证码。如果需要，您可以添加背景图像并删除 id 为“mainCaptcha”的输入 html 标签的边框我希望这能回答您的问题。
关于javascript - 如何使用 javascript 以 html 形式创建文本验证码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21727595/
26
4
0
我是一名优秀的程序员,十分优秀！