1.创建登录界面
https://www.cnblogs.com/YorkZhangYang/p/12538576.html
2.表单验证(使用正则表达式)
(1)验证用户名:2-12位,字母开头,不能有_$之外的特殊字符,非空
(2)验证密码:6-12位非空,字母开头,非空
(3)验证码不为空
3.代码
<script> //获取要验证的表单对象 let username = document.getElementById("username"); let password = document.getElementById("password"); let validatecode = document.getElementById("validateCode"); let span = document.getElementById("tip"); username.onblur=function() { vailidateUserName(); } password.onblur=function() { validatePassword(); } validatecode.onblur=function() { validateCode(); } //验证用户名 function vailidateUserName() { //2-12位,字母开头,不能有_$之外的特殊字符 let reg = /^[a-zA-Z][w$]{1,11}$/; let value= username.value; if(!value) { span.innerHTML = "用户名不能为空"; return false; } else if(!reg.test(value)) { span.innerHTML = "用户名2-12位,字母开头,不能有_$之外的特殊字符"; return false; } else { span.innerHTML = ""; return true; } } //验证密码 function validatePassword() { let value = password.value; //字母正则表达式 let reg = /^[a-zA-Z]$/; let firstWord = value.charAt(0); if(!value) { span.innerHTML = "密码不能为空"; return false; } else if(!reg.test(firstWord)) { span.innerHTML = "密码首位应该是字母"; return false; } else if(value.length>12||value.length<6) { span.innerHTML = "密码的长度为6-12位"; return false; } else { span.innerHTML = ""; return true; } } //验证码不能为空 function validateCode() { let value = validatecode.value; if(!value) { span.innerHTML = "验证码不能为空"; return false; } else { span.innerHTML = ""; return true; } } $("#submitBtn").click(function(){ if(vailidateUserName()&&validatePassword()&&validateCode()) { document.getElementById("loginForm").submit(); } else { span.innerHTML = "表单未正确填写"; return false; } }); </script>
参考文章