纯前端实现登录页面(表单通过正则判断，实现验证码功能以及简单的登录和重置功能)

页面效果如下：

代码分享：

HTML代码：

登录系统账号：密码：验证码： 
前往首页 前往注册

CSS代码：

* {margin: 0px;padding: 0px;
}html,
body {height: 100%;overflow: hidden;
}body {background: url("../image/2020.jpg") no-repeat;background-size: 100% 100%;position: relative;
}.background {width: 400px;height: 400px;margin-top: 120px;margin-left: 100px;background-color: rgba(102, 102, 102, 0.8);border-radius: 20px;position: relative;
}.head {width: 100%;height: 50px;line-height: 50px;color: white;font-size: 28px;margin-top: 20px;text-align: center;position: absolute;
}.zhanghao {width: 100%;height: 40px;color: white;font-size: 18px;text-align: center;margin-top: 100px;position: absolute;
}.zhanghao input {height: 25px;outline: none;
}.mima {width: 100%;height: 40px;color: white;font-size: 18px;text-align: center;margin-top: 160px;position: absolute;
}.mima input {height: 25px;outline: none;
}.yanzhengma {width: 100%;height: 40px;color: white;font-size: 18px;text-indent: 75px;margin-top: 220px;position: absolute;
}#input {width: 50px;height: 25px;outline: none;
}#code {width: 80px;height: 30px;font-size: 20px;font-family: Arial;font-style: italic;font-weight: bold;letter-spacing: 2px;color: blue;border: 0;background-color: white;
}.btn {width: 100%;height: 40px;color: white;font-size: 18px;text-indent: 85px;margin-top: 280px;position: absolute;
}.btn2 {width: 100%;height: 40px;line-height: 40px;color: white;font-size: 18px;text-align: center;margin-top: 340px;position: absolute;
}.returnSenLia {text-decoration: none;color: white;
}.zhucea {text-decoration: none;color: red;
}.denglu {width: 100px;height: 40px;color: white;font-size: 18px;background-color: red;border-radius: 10px;border: 0px;outline: none;
}

JS代码：

window.onload = function() {//验证码var code = document.getElementById("code");//刷新验证码function change() {// 验证码组成库var arrays = new Array('2', '3', '4', '5', '6', '7', '8', '9','a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j','k', 'm', 'n', 'p', 'q', 'r', 's', 't','u', 'v', 'w', 'x', 'y', 'z','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J','K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T','U', 'V', 'W', 'X', 'Y', 'Z');// 重新初始化验证码codes = '';// 随机从数组中获取四个元素组成验证码for (var i = 0; i < 4; i++) {// 随机获取一个数组的下标var r = parseInt(Math.random() * arrays.length);codes += arrays[r];}// 验证码添加到input里code.value = codes;}//加载显示在页面上change();//单击更换验证码code.onclick = change;//单击验证var account = document.getElementById("account");var adminPswd = document.getElementById("adminPswd");var check = document.getElementById("check");var chongzhi = document.getElementById("chongzhi");var input = document.getElementById("input");//验证码验证check.onclick = function() {var inputCode = input.value.toUpperCase(); //取得输入的验证码并转化为大写var zjlaccount = account.value;var zjladminPswd = adminPswd.value;if (zjlaccount.length == 0) { //若输入的账号长度为0alert("请输入账号！"); //则弹出请输入账号} else if (zjladminPswd.length == 0) { //若输入的密码长度为0alert("请输入密码！"); //则弹出请输入密码} else if (inputCode.length == 0) { //若输入的验证码长度为0alert("请输入验证码！"); //则弹出请输入验证码} else {if (inputCode != codes.toUpperCase()) { //若输入的验证码与产生的验证码不一致时alert("验证码输入错误！请重新输入"); //则弹出验证码输入错误change(); //刷新验证码input.value = ""; //清空文本框} else if (zjlaccount != "zcy" || zjladminPswd != "zcyzcy") {alert("账号或密码错误！");} else {alert("登录成功！");window.location.href = "Oneself.html";}}}//重置//清空所有登录信息//验证码刷新chongzhi.onclick = function() {change(); //刷新验证码input.value = ""; //清空文本框account.value = "";adminPswd.value = "";}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！