**相信有很多的人在刚刚做项目的实现，登录与注册功能的实现是基本的要求，要是刚刚开始写的小伙伴肯定会有很多的困惑，这里我介绍一下自己的写法，希望能帮到你，也希望能免费点个小
**
这里就以之前我写的一个为例，大家可以根据自己的规则来更改
基本流程：
登录–其实在项目的实现中就是一个向数据库中做一个检查的功能，如果用户在提交发送至后端数据的时候，在后台就会做一个查询用户的是否存在，这个时候就在使用查询语句将查到的数据进行一个返回，将主要的信息给到前端就可以完成一个校验
登录的 html
<!DOCTYPE html>
<html lang="en">
<body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="denglu.css" />
<script src="jquery-3.6.0.min.js"></script>
<script src="denglu.js"></script>
<link rel="shortcut icon" href="../img/防疫01.webp" type="image/x-icon" />
<title>登录界面</title>
</head>
<body onload="change();">
/**
<video id="v1" autoplay muted loop="true" style="width: 100%">
<!--autoplay自动播放 muted使其静音 loop循环播放-->
<source src="../vdeo/抗疫.wmv">
</video>
*/
<audio id='audio' src="../mp3/GONTITI - 朝 (早晨).m4a"></audio>
<div id="zg">
<div id="logindiv">
<h2 id="title" class="user">账 号 登 录</h2>
<div>
// onblur ==》为对象失去焦点时触发
<input type="text" id="username" placeholder="用户名" onblur="checkname();" />
<div id="cw"></div>
</div>
<div>
<input type="password" id="password" placeholder="密码" onblur="checkpass();" />
<div id="cw1"></div>
</div>
<div>
<input type="text" id="vcode" placeholder="验证码" onblur="check();" />
<span id="code" onclick="change()"></span>
<div id="cw2"></div>
</div>
<div id="pro">
<!-- <span id="lo"><input type="checkbox" />一周内免登录</span> -->
<a href="zhuce.html" id="zc">免费注册</a>
</div>
// onclick ==》最常用的点击触发事件
<div id="btlogin"><input type="button" value="登录" onclick="checkall();" /></div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
图片展示
这里只是我们实现了静态的页面，接下来我们要实现的是用户名与密码以及验证码的校验并完成button按钮提交的具体实现功能，在校验的部分就需要加入正则表达式来对用户输入的内容进行一个限制，直接上代码
登录的js代码
function checkname() {
var name = document.getElementById("username").value;
var reg = /^[\u4e00-\u9fa5a-zA-Z]{2,4}$/;
if (name == '') {
document.getElementById("cw").className = "wrong";
document.getElementById("cw").innerText = "用户名不能为空!";
return false;
} else {
document.getElementById("cw").innerText = " ";
return true;
}
}
function checkpass() {
var pass = document.getElementById("password").value;
var reg = /^[0-9a-zA-Z]{6,12}$/;
if (pass == '') {
document.getElementById("cw1").className = "wrong";
document.getElementById("cw1").innerText = "密码不能为空!";
return false;
}
else {
if (reg.test(pass)) {
document.getElementById("cw1").innerText = " ";
return true;
} else {
document.getElementById("cw1").className = "wrong";
document.getElementById("cw1").innerText = "密码长度为6—12位";
return false;
}
}
}
这里还有一个就是验证码功能的实现，其实在登录部分不需要这个也可以，看个人需求吧
var code;
function change() {
var arrays = new Array(
'1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
'u', 'v', 'w', 'x', 'y', 'z',
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
'U', 'V', 'W', 'X', 'Y', 'Z');
code = '';
for (var i = 0; i < 4; i++) {
var r = parseInt(Math.random() * arrays.length);
code += arrays[r];
}
document.getElementById("code").innerHTML = code;
}
function check() {
var icode = document.getElementById("vcode").value;
if (icode == '') {
document.getElementById("cw2").className = "wrong";
document.getElementById("cw2").innerText = "验证码不能为空!";
return false;
}
else {
if (icode != code) {
document.getElementById("cw2").className = "wrong";
document.getElementById("cw2").innerText = "请输入正确的验证码";
return false;
} else {
document.getElementById("cw2").innerText = " ";
return true;
}
}
}
这里说明一下这个验证码的实现思路，是通过‘.0-9’,‘a-z’,'A-Z’的组成的数组，再通过Math.random() * arrays.length来找到随机且不超范围的数组下标，4次循环每次拿到一个字符并数组验证码
最后就是一个提交的校验实现，我这里提交只是一个静态页面的跳转，因为前面的校验函数我是设置为一个Boolean类型函数，再提交的时候就判断前面是否返回为ture就行了
function checkall() {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var week = now.getDay();
var a = ['日', '一', '二', '三', '四', '五', '六'];
var str = "现在是：" + hour + ":" + minute + ":" + second + ",星期" + a[week];
if (checkname() == true && checkpass() == true && check() == true) {
alert(str + "，登录成功！");
location.href = "zhuce.html";
} else {
alert("登录失败！");
return false;
}
}
/**function musicAutoPlay() {
let music = document.getElementById('audio')
if (music.paused) {
music.play()
}
}
*/
ok,成功!
如果想实现的是传入后端的话，最好的话还是在提交函数里面嵌入Ajax发送打包的数据，我这里就简单的介绍一下
ajax
没有配合使用jquery的时候
配合使用jquery的时候，这也是目前比较常用的一种方式
基本的流程：
注册–该功能就是将用户的信息进行打包向后端进行发送，一般发送为一个java 对象，再进行一个序列化进行数据处理，这里就向数据库（例：mysql）中实现一条SQL插入语句，再返回提示信息到前端即可
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../img/防疫01.webp" type="image/x-icon" />
<title>注册界面</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="zhuce.css" />
<script src="../js/jquery.min.js"></script>
<script src="zhucehunx.js"></script>
</head>
<!--全局采用的是点击触发事件-->
<body onload="change();">
// <audio id='audio' src="../mp3/轻音乐.m4a" />
<div id="zg">
<div id="logindiv">
<h2 id="title" class="user">账 号 注 册</h2>
<div>
<input type="text" id="username" placeholder="用户名" onblur="checkname();" />
<div id="cw"></div>
</div>
<div>
<input type="password" id="password1" placeholder="密码" onblur="checkpass1();" />
<div id="cw1"></div>
</div>
<div>
<input type="password" id="password2" placeholder="再次输入密码" onblur="checkpass2();" />
<div id="cw2"></div>
</div>
<!--
<div>
<input type="text" id="enmail" placeholder="输入邮箱" onblur="checkpassenmail();" />
<div id="cw3"></div> -->
<!-- </div-->
<!-- <input type="text" id="email" placeholder="输入邮箱" noblur="emailTest()">
<input type="button" value="验证邮箱" id=button>
<p>
<div id=emailError></div> -->
<input type="text" id="email" placeholder="输入邮箱">
<input type="button" value="验证邮箱" id=button onclick="fun()">
<p>
<div id=emailError></div>
<div>
<input type="text" id="vcode" placeholder="验证码" onblur="check();" />
<span id="code" onclick="change()"></span>
<div id="cw4"></div>
</div>
<div id="btlogin"><input type="button" value="注 册" onclick="checkall();" /></div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
js
function check() {
var icode = document.getElementById("vcode").value;
if (icode == '') {
document.getElementById("cw4").className = "wrong";
document.getElementById("cw4").innerText = "验证码不能为空!";
return false;
}
else {
if (icode != code) {
document.getElementById("cw4").className = "wrong";
document.getElementById("cw4").innerText = "请输入正确的验证码";
return false;
} else {
document.getElementById("cw4").innerText = " ";
return true;
}
}
}
function checkname() {
var name = document.getElementById("username").value;
// var reg = /^[\u4e00-\u9fa5a-zA-Z]{2,4}$/;
if (name == '') {
document.getElementById("cw").className = "wrong";
document.getElementById("cw").innerText = "用户名不能为空!";
return false;
} else {
// if (reg.test(name)) {
document.getElementById("cw").innerText = " ";
return true;
}
}
function checkpass1() {
var pass = document.getElementById("password1").value;
var reg = /^[0-9a-zA-Z]{6,12}$/;
if (pass == '') {
document.getElementById("cw1").className = "wrong";
document.getElementById("cw1").innerText = "密码不能为空!";
return false;
}
else {
if (reg.test(pass)) {
document.getElementById("cw1").innerText = " ";
return true;
} else {
document.getElementById("cw1").className = "wrong";
document.getElementById("cw1").innerText = "密码长度为6—12位";
return false;
}
}
}
function checkpass2() {
var pass2 = document.getElementById("password2").value;
var pass1 = document.getElementById("password1").value;
var reg = /^[0-9a-zA-Z]{6,12}$/;
if (pass2 == '') {
document.getElementById("cw2").className = "wrong";
document.getElementById("cw2").innerText = "不能为空!";
return false;
}
else {
if (reg.test(pass2) && pass1 == pass2) {
document.getElementById("cw2").innerText = " ";
return true;
} else {
document.getElementById("cw2").className = "wrong";
document.getElementById("cw2").innerText = "密码不一致";
return false;
}
}
}
提交部分
function checkall() {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var week = now.getDay();
var a = ['日', '一', '二', '三', '四', '五', '六'];
var str = "现在是：" + hour + ":" + minute + ":" + second + ",星期" + a[week];
if (checkname() == true && checkpass1() == true && check() == true && checkpass1() == true) {
alert(str + "，注册成功！");
location.href = "denglu.html";
} else {
alert("注册失败！");
return false;
}
}
登录与注册的应用场景其实不多，但是却是大部分的开发软件所需要实现的一部分，这个只是其实的一种实现方式，还有配合拦截器、过滤器等方式实现，这还需要看开发的需求情况来定。
嗯，差不多也就是这样了，希望能帮到你一些