js sweetalert实现输入验证码并且判断输入的是否为111111,不使用jquery
时间: 2024-02-18 18:04:11 浏览: 26
当然可以,SweetAlert2 库支持原生 JavaScript,不需要依赖 jQuery。以下是一个示例代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SweetAlert2 Demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.6/dist/sweetalert2.min.css">
</head>
<body>
<button onclick="showVerificationCode()">验证</button>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.6/dist/sweetalert2.min.js"></script>
<script>
function showVerificationCode() {
Swal.fire({
title: '请输入验证码:',
input: 'text',
inputAttributes: {
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonText: '确认',
showLoaderOnConfirm: true,
preConfirm: (code) => {
return new Promise((resolve) => {
setTimeout(() => {
if (code === '111111') {
resolve()
} else {
Swal.showValidationMessage('验证码错误')
}
}, 1000)
})
},
allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
if (result.value) {
Swal.fire({
title: '验证码输入正确!',
icon: 'success'
})
}
})
}
</script>
</body>
</html>
```
在上面的代码中,我们在页面的 `<head>` 中引入 SweetAlert2 的 CSS 文件,然后在页面底部引入 SweetAlert2 的 JavaScript 文件。在按钮的点击事件中,我们调用了 `showVerificationCode()` 函数,该函数会弹出输入验证码的弹窗,并判断输入的验证码是否为 `111111`,最后根据验证结果弹出相应的提示框。