图片展示 这里只是我们实现了静态的页面，接下来我们要实现的是用户名与密码以及验证码的校验并完成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 //