以下是JavaScript的表单验证功能，可根据JS代码编写出你想要的HTML和CSS的代码。
关于正则表达式的使用，以及常用的正则表达式，笔者目前还在整理中，后期整理完成后，会将链接放在下面，供大家一起学习。
//1.声明变量var emailObj;var usernameObj;var passwordObj;var confirmObj;var emailMsg;var usernameMsg;var passwordMsg;var confirmMsg;//页面加载之后，获取页面中的对象window.onload = function() {emailObj = document.getElementById("email");usernameObj = document.getElementById("username");passwordObj = document.getElementById("password");confirmObj = document.getElementById("confirm");emailMsg = document.getElementById("emaileMsg");usernameMsg = document.getElementById("usernameMsg");confirmMsg = document.getElementById("confirmMsg");};//3.检验整个表单function checkForm() {var bEmail = checkEmail();var bUsername = checkUsername();var bPassword = checkPassword();var bConfirm = checkCondfirm();return bUsername && bPassword && bConfirm && bEmail;}//4.验证邮箱function checkEmail() {var regex = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;var value = emailObj.value;var msg = "";if(!value) {msg = "邮箱必须填写";} else if (!regex.test(value)) {msg = "邮箱格式不合法";}emailMsg.innerHTML = msg;emailObj.parentNode.parentNode.style.color = msg == ""?"black":"red";return msg == "";}//5.验证用户名‘function checkUsername() {var regex = /^[a-zA-Z0-9_-]\w{0,9}$/; //字母数字下划线1-10位，不能是数字开头var value = usernameObj.value;//获取usernameObj中的文本var msg = ""; //最后的提示小事，默认为空//如果用户名是null或"",!value的值为false，如果不为空 !value值为trueif(!value) {msg = "用户名必须填写";} else if (regex.test(value)) {msg = "用户名不合法";}usernameMsg.innerHTML = msg;usernameObj.parentNode.parentNode.style.color = msg == ""?"black":"red";return msg == ""; //如果提示消息为空则代表没出错，返回true}//6.验证密码function checkPassword() {var regex = /^.{6,16}$/; //任意字符，6-16位var value = passwordObj.value;var msg = "";if(!value) {msg = "密码必须填写";} else if (!regex.test(value)) {msg = "密码不合法";}passwordMsg.parentNode.parentNode.style.color = msg == ""?"black":"red";return msg == "";}//7.验证确认密码function checkCondfirm() {var passwordValue = passwordObj.value;var confirmValue = confirmObj.value;var msg = "";if(!confirmValue) {msg = "确认密码填写";} else if (passwordValue != confirmValue) {msg = "密码必须保持一致";confirmMsg.innerHTML = msg;confirmObj.parentNode.parentNode.style.color = msg == ""?"black":"red";return msg == "";}
以下代码是简单的测试邮箱是否匹配成功的代码，可根据下面来实现具体的逻辑
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Document</title></head><body><input type="text" placeholder="请输入邮箱" id="email"></body><script>email.onchange = function(){var email = this.value;var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;if(reg.test(email)){alert("邮箱格式正确");}else{alert("邮箱格式不正确");}}</script></html>
