JavaScript实现表单验证功能

时间：2021-05-26

本文实例为大家分享了JavaScript实现表单验证功能的具体代码，供大家参考，具体内容如下

以下是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值为true if(!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章