JavaScript实现表单验证功能

2023-07-08 14:50:06 172

//1.声明变量 varemailObj; varusernameObj; varpasswordObj; varconfirmObj; varemailMsg; varusernameMsg; varpasswordMsg; varconfirmMsg; //页面加载之后，获取页面中的对象 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.检验整个表单 functioncheckForm(){ varbEmail=checkEmail(); varbUsername=checkUsername(); varbPassword=checkPassword(); varbConfirm=checkCondfirm(); returnbUsername&&bPassword&&bConfirm&&bEmail; } //4.验证邮箱 functioncheckEmail(){ varregex=/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; varvalue=emailObj.value; varmsg=""; if(!value){ msg="邮箱必须填写"; }elseif(!regex.test(value)){ msg="邮箱格式不合法"; } emailMsg.innerHTML=msg; emailObj.parentNode.parentNode.style.color=msg==""?"black":"red"; returnmsg==""; } //5.验证用户名‘ functioncheckUsername(){ varregex=/^[a-zA-Z0-9_-]\w{0,9}$/;//字母数字下划线1-10位，不能是数字开头 varvalue=usernameObj.value;//获取usernameObj中的文本 varmsg="";//最后的提示小事，默认为空 //如果用户名是null或"",!value的值为false，如果不为空!value值为true if(!value){ msg="用户名必须填写"; }elseif(regex.test(value)){ msg="用户名不合法"; } usernameMsg.innerHTML=msg; usernameObj.parentNode.parentNode.style.color=msg==""?"black":"red"; returnmsg=="";//如果提示消息为空则代表没出错，返回true } //6.验证密码 functioncheckPassword(){ varregex=/^.{6,16}$/;//任意字符，6-16位 varvalue=passwordObj.value; varmsg=""; if(!value){ msg="密码必须填写"; }elseif(!regex.test(value)){ msg="密码不合法"; } passwordMsg.parentNode.parentNode.style.color=msg==""?"black":"red"; returnmsg==""; } //7.验证确认密码 functioncheckCondfirm(){ varpasswordValue=passwordObj.value; varconfirmValue=confirmObj.value; varmsg=""; if(!confirmValue){ msg="确认密码填写"; }elseif(passwordValue!=confirmValue){ msg="密码必须保持一致"; confirmMsg.innerHTML=msg; confirmObj.parentNode.parentNode.style.color=msg==""?"black":"red"; returnmsg==""; }

Document

JavaScript实现表单验证功能

热门推荐

随机推荐