表单验证 带验证码 js
时间: 2023-11-23 21:06:08 浏览: 36
实现带验证码的表单验证可以通过以下步骤:
1. 在表单中添加验证码的输入框和图片,图片的 src 属性可以设置为一个生成验证码的 API 接口,例如:
```html
<form>
<label>用户名:<input type="text" name="username"></label><br>
<label>密码:<input type="password" name="password"></label><br>
<label>验证码:<input type="text" name="captcha"></label>
<img id="captcha-img" src="/api/captcha">
<button type="submit">提交</button>
</form>
```
2. 在 JavaScript 中监听表单的提交事件,在提交前先验证验证码是否正确,如果不正确则禁止提交,并刷新验证码图片。可以使用 Ajax 请求来验证验证码,例如:
```javascript
const form = document.querySelector('form');
const captchaImg = document.querySelector('#captcha-img');
form.addEventListener('submit', e => {
e.preventDefault();
const username = form.elements.username.value;
const password = form.elements.password.value;
const captcha = form.elements.captcha.value;
// 验证码验证
fetch('/api/captcha/verify', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ captcha })
})
.then(response => response.json())
.then(data => {
if (data.valid) {
// 验证通过,提交表单
form.submit();
} else {
// 验证码错误,刷新验证码
captchaImg.src = '/api/captcha?' + Date.now();
}
})
.catch(error => {
console.error(error);
alert('验证码验证出错,请重试!');
});
});
```
3. 在后端实现生成验证码和验证验证码的 API 接口。生成验证码可以使用第三方库,例如 `svg-captcha`,验证验证码则需要将验证码和用户输入的验证码进行比较,如果相同则返回 `{ valid: true }`,否则返回 `{ valid: false }`,例如:
```javascript
const svgCaptcha = require('svg-captcha');
const express = require('express');
const app = express();
// 生成验证码
app.get('/api/captcha', (req, res) => {
const captcha = svgCaptcha.create();
req.session.captcha = captcha.text; // 将验证码存入 session
res.type('svg').send(captcha.data); // 返回 SVG 格式的验证码图片
});
// 验证验证码
app.post('/api/captcha/verify', express.json(), (req, res) => {
const captcha = req.session.captcha; // 从 session 中获取验证码
const userCaptcha = req.body.captcha; // 获取用户输入的验证码
if (captcha && captcha.toLowerCase() === userCaptcha.toLowerCase()) {
res.json({ valid: true }); // 验证通过
} else {
res.json({ valid: false }); // 验证失败
}
});
```
以上是一个基本的带验证码的表单验证流程,需要注意的是,为了防止恶意攻击,应该加入一些安全措施,例如限制验证码刷新次数、限制验证次数、添加防止 CSRF 攻击的 token 等。