表单验证 带验证码 js
时间: 2023-09-30 08:04:19 浏览: 53
表单验证带验证码的实现步骤如下:
1. HTML部分:在表单中添加验证码输入框和验证码图片
```html
<form id="myForm" method="post">
<input type="text" name="username" placeholder="用户名"><br>
<input type="password" name="password" placeholder="密码"><br>
<input type="text" name="captcha" placeholder="验证码"><br>
<img id="captchaImg" src="captcha.php" onclick="this.src='captcha.php?'+Math.random()" alt="验证码"><br>
<input type="submit" value="提交">
</form>
```
其中,验证码图片的src属性指向一个生成验证码的PHP脚本,点击图片会刷新验证码。
2. JS部分:在表单提交时进行验证
```javascript
document.getElementById("myForm").onsubmit = function() {
// 验证码验证
var captchaInput = document.getElementsByName("captcha")[0];
var captchaImg = document.getElementById("captchaImg");
if (captchaInput.value.toLowerCase() != captchaImg.getAttribute("data-captcha").toLowerCase()) {
alert("验证码错误!");
captchaInput.value = "";
captchaInput.focus();
return false;
}
// 用户名和密码验证
var username = document.getElementsByName("username")[0];
var password = document.getElementsByName("password")[0];
if (username.value == "") {
alert("请输入用户名!");
username.focus();
return false;
}
if (password.value == "") {
alert("请输入密码!");
password.focus();
return false;
}
// 表单提交
return true;
}
// 生成验证码
function generateCaptcha() {
var captchaImg = document.getElementById("captchaImg");
var xhr = new XMLHttpRequest();
xhr.open("GET", "captcha.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
captchaImg.src = xhr.responseText;
captchaImg.setAttribute("data-captcha", xhr.getResponseHeader("X-Captcha"));
}
};
xhr.send();
}
// 页面加载时生成验证码
window.onload = generateCaptcha;
```
在表单提交时,首先验证验证码是否正确,如果错误则弹出提示并清空验证码输入框;如果正确则继续验证用户名和密码是否为空。如果用户名或密码为空则弹出提示并将焦点设置到相应的输入框,否则提交表单。
在生成验证码的函数中,使用XMLHttpRequest对象向服务器请求生成验证码的PHP脚本,获取响应后更新验证码图片的src属性并将正确的验证码存储在data-captcha属性中,以便在表单提交时进行验证。
注意:在服务器端生成验证码时,需要将正确的验证码存储在HTTP响应头的X-Captcha字段中,以便客户端获取并验证。