js表单事件及验证码案例
程序员文章站
2024-03-22 00:02:52
...
效果图如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input,
button {
height: 30px;
margin: 20px 0;
font-size: 20px;
}
button {
margin: 0 20px;
}
span[name^="promptInfo"] {
margin-left: 30px;
}
span[name="verifiCode"] {
margin-left: 20px;
}
</style>
</head>
<body>
<form action="./BOM基本属性方法.html">
登录账号：<input type="text" name="loginAccount" placeholder="请输入账号" required maxlength="16">
<span name="promptInfo"></span><br>
登录密码：<input type="text" name="loginPassword" placeholder="请输入密码" required> <span name="promptInfo1"></span><br>
再次输入：<input type="text" name="loginPassword1" placeholder="请再次输入密码" required><br>
验 证 码： <input type="text" name="inputVerifiCode" required><span name="verifiCode"></span><button
type="button">看不清,重新刷新</button><span name="promptInfo2"></span><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
<script>
var promptInfo = document.querySelector("[name='promptInfo']");// 账号提示信息的span
var promptInfo1 = document.querySelector("[name='promptInfo1']");// 密码提示信息的span
var promptInfo2 = document.querySelector("[name='promptInfo2']");// 验证码错误提示信息的span
var loginAccount = document.querySelector("[name='loginAccount']");// 登录账号
var loginPassword = document.querySelector("[name='loginPassword']");//登录密码
var loginPassword1 = document.querySelector("[name='loginPassword1']");// 确认登录密码
var verifiCode = document.querySelector("[name='verifiCode']");// 自动生成验证码
var inputVerifiCode = document.querySelector("[name='inputVerifiCode']");// 输入验证码
var oForm = document.querySelector("form");
var btn = document.querySelector("button");
// 随机验证码
function randomVerifiCode() {
var str = "0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
var str1 = "";
for (let i = 0; i < 6; i++) {
// 随机旋转
var h = Math.random() < 0.5 ? -1 : 1;
var zhuan = Math.random() * h * 30;
// 随机字体大小
var randomFontSize = parseInt(Math.random() * 15) + 20;
var num = parseInt(Math.random() * str.length);
if (str1.indexOf(str[num]) != -1) {
i--;
continue;
}
str1 += `<span style="transform:rotateZ(${zhuan}deg);display:inline-block;color:${randomColor()};font-size:${randomFontSize}px;">${str[num]}</span>`;
}
return str1;
}
// 随机颜色
function randomColor() {
var color = "#";
for (let i = 0; i < 3; i++) {
var num = parseInt(Math.random() * 256);
if (num < 15) {
color = color + "0" + num.toString(16);
}
else {
color += num.toString(16);
}
}
return color;
}
// 点击更新随机验证码
btn.onclick = function () {
verifiCode.innerHTML = randomVerifiCode();
}
// 提前调用显示在网页
btn.onclick();
// 获取焦点时,在span标签中输入提示
loginAccount.onfocus = function () {
promptInfo.innerHTML = "请您输入账号,不能为空,长度是8-16位";
}
// 输入数据,在span标签中输入提示
loginAccount.oninput = function () {
var length = loginAccount.value.length;
promptInfo.style.color = "black";
promptInfo.innerHTML = `目前输入${length}个字符,最少输入8个字符，最多还能输入${16 - length}个字符,请继续输入`;
}
//当失去焦点时, 判断, 输入的数据, 是否符合规范
// 目前就判断数据的长度是8-16为字符
loginAccount.onchange = function () {
var length = loginAccount.value.length;
if (length <= 16 && length >= 8) {
promptInfo.style.color = "black";
promptInfo.innerHTML = `目前输入${length}个字符,符合规范`;
}
else if (length > 16) {
promptInfo.style.color = "red";
promptInfo.innerHTML = `目前输入${length}个字符,超了，请停止输入并删除`;
}
else {
promptInfo.style.color = "black";
promptInfo.innerHTML = `目前输入${length}个字符,至少还需输入${8 - length}个字符,请继续输入`;
}
}
// 获取焦点时,在span标签中输入提示
loginPassword.onfocus = function () {
promptInfo1.innerHTML = "请您输入密码,不能为空";
}
// 当点击提交按钮时,进行数据验证
// 数据必须符合规范,才能执行提交表单效果
// 否则会阻止表单提交
// console.log(verifiCode.innerText);
oForm.onsubmit = function (e) {
var length = loginAccount.value.length;
var length1 = loginPassword.value.length;
if (!(length >= 8 && length <= 16)) {
e.preventDefault();
promptInfo.style.color = "red";
promptInfo.innerHTML = '您输入的账号,不符合长度规范,请输入8-16位账号';
return;
}
// 密码和确认密码验证
if (loginPassword.value !== loginPassword1.value) {
e.preventDefault();
promptInfo1.style.color = "red";
promptInfo1.innerHTML = '您两次输入的密码不一样,请重新输入';
return;
}
// 验证码确认
if (inputVerifiCode.value !== verifiCode.innerText) {
e.preventDefault();
promptInfo2.style.color = "red";
promptInfo2.innerHTML = '您输入的验证码错误,请重新输入';
return;
}
}
</script>
</body>
</html>
注释详细，不懂欢迎评论，有错的不足的地方欢迎指出，共同进步。