FORM表单如何添加验证码（刷新变换）

PetitQ JQuery/PHP 2021-11-29 747 0 0

我们在自己做网站时，经常会使用到 FORM 表单，在 FORM 表单中为了防止别人频繁提交，常常会在表单里添加验证码。如下图：

下面介绍一下如何在 FORM 表单如何添加验证码，并且刷新自动变换的效果。

第一步

在网页的 header 标签上面，添加以下的 JS 代码；

也想出现在这里？联系我们吧

```
<script type="text/javascript">
```
```
var code;
```
```
function createCode()
```
```
{
```
```
code = "";
```

var codeLength = 6; //验证码的长度

var checkCode = document.getElementById("checkCode");

var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,

'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'); //所有候选组成验证码的字符，当然也可以用中文的

```
for(var i = 0; i < codeLength; i++)
```
```
{
```

var charNum = Math.floor(Math.random() * 52);

```
code += codeChars[charNum];
```
```
}
```
```
if(checkCode)
```
```
{
```
```
checkCode.className = "code";
```
```
checkCode.innerHTML = code;
```
```
}
```
```
}
```
```
function validateCode()
```
```
{
```

var inputCode=document.getElementById("inputCode").value;

```
if(inputCode.length <= 0)
```
```
{
```
```
alert("请输入验证码！");
```
```
}
```

else if(inputCode.toUpperCase() != code.toUpperCase())

```
{
```
```
alert("验证码输入有误！");
```
```
createCode();
```
```
}
```
```
else
```
```
{
```
```
$('form').submit();
```
```
}
```
```
}
```
```
</script>
```

第二步

在 FORM 表单的 HTML 代码中，添加以下的 HTML 代码，用于填写验证码和显示验证码；

<form id="form1" runat="server" onsubmit="validateCode()">

```
<div>
```

<table border="0" cellspacing="5" cellpadding="5" >

```
<tr>
```
```
<td></td>
```

<td><div class="code" id="checkCode" onclick="createCode()" ></div></td>

<td><a href="#" onclick="createCode()">看不清换一张</a></td>

```
</tr>
```
```
<tr>
```
```
<td>验证码：</td>
```

<td><input style="float:left;" type="text" id="inputCode" /></td>

```
<td>请输入验证码</td>
```
```
</tr>
```
```
<tr>
```
```
<td></td>
```

<td><input id="Button1" onclick="validateCode();" type="button" value="确定" /></td>

```
<td></td>
```
```
</tr>
```
```
</table>
```
```
</div>
```
```
</form>
```

第三步

为了让网页首次加载时，显示验证码，需要在 BODY 添加一个载入动作；

```
<body onload="createCode()">
```

第四步

在 CSS 文件中，添加以下的 CSS 样式，用于控制验证码的样式；

```
<style type="text/css">
```
```
.code
```
```
{
```
```
background:url(code_bg.jpg);
```
```
font-family:Arial;
```
```
font-style:italic;
```
```
color:blue;
```
```
font-size:20px;
```
```
border:0;
```
```
padding:5px 10px;
```
```
letter-spacing:3px;
```
```
font-weight:bolder;
```
```
cursor:pointer;
```
```
width:120px;
```
```
height:40px;
```
```
line-height:40px;
```
```
text-align:center;
```
```
vertical-align:middle;
```
```
}
```
```
</style>
```

这样就可以在自己的网页中的 FROM 表单中添加了验证码了，并且每刷新一次，就会显示一个新的验证码。

下面是整个验证码代码：

```
<html>
```
```
<head>
```
```
<title>js验证码</title>
```
```
<style type="text/css">
```
```
.code
```
```
{
```
```
background:url(code_bg.jpg);
```
```
font-family:Arial;
```
```
font-style:italic;
```
```
color:blue;
```
```
font-size:20px;
```
```
border:0;
```
```
padding:5px 10px;
```
```
letter-spacing:3px;
```
```
font-weight:bolder;
```
```
cursor:pointer;
```
```
width:120px;
```
```
height:40px;
```
```
line-height:40px;
```
```
text-align:center;
```
```
vertical-align:middle;
```
```
}
```
```
</style>
```
```
<script type="text/javascript">
```
```
var code;
```
```
function createCode()
```
```
{
```
```
code = "";
```
```
var codeLength = 6;
```
```
//验证码的长度
```

var checkCode = document.getElementById("checkCode");

var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,

'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');

//所有候选组成验证码的字符，当然也可以用中文的

```
for(var i = 0; i < codeLength; i++)
```
```
{
```

var charNum = Math.floor(Math.random() * 52);

```
code += codeChars[charNum];
```
```
}
```
```
if(checkCode)
```
```
{
```
```
checkCode.className = "code";
```
```
checkCode.innerHTML = code;
```
```
}
```
```
}
```
```
function validateCode()
```
```
{
```

var inputCode=document.getElementById("inputCode").value;

```
if(inputCode.length <= 0)
```
```
{
```
```
alert("请输入验证码！");
```
```
}
```

else if(inputCode.toUpperCase() != code.toUpperCase())

```
{
```
```
alert("验证码输入有误！");
```
```
createCode();
```
```
}
```
```
else
```
```
{
```
```
$('form').submit();
```
```
}
```
```
}
```
```
</script>
```
```
</head>
```
```
<body onload="createCode()">
```

<form id="form1" runat="server" onsubmit="validateCode()">

```
<div>
```

<table border="0" cellspacing="5" cellpadding="5" >

```
<tr>
```
```
<td></td>
```

<td><div class="code" id="checkCode" onclick="createCode()" ></div></td>

<td><a href="#" onclick="createCode()">看不清换一张</a></td>

```
</tr>
```
```
<tr>
```
```
<td>验证码：</td>
```

<td><input style="float:left;" type="text" id="inputCode" /></td>

```
<td>请输入验证码</td>
```
```
</tr>
```
```
<tr>
```
```
<td></td>
```

<td><input id="Button1" onclick="validateCode();" type="button" value="确定" /></td>

```
<td></td>
```
```
</tr>
```
```
</table>
```
```
</div>
```
```
</form>
```
```
</body>
```
```
</html>
```

FORM 表单如何添加验证码（刷新变换）

已有 187 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

JQuery/PHP

FORM表单如何添加验证码（刷新变换）

第一步

第二步

第三步

第四步

FORM 表单如何添加验证码（刷新变换）

相关文章

JavaScript 将光标定位于输入框最右侧的方法

jQuery 如何判断元素是否有子节点

PHP 查询姓名返回成绩(array_key_exists()函数)

发表回复取消回复

热销模板

JQuery/PHP

第一步

第二步

第三步

第四步

FORM 表单如何添加验证码（刷新变换）

相关文章

发表回复 取消回复

热销模板

发表回复取消回复