【注册页面表单校验--正则表达式--javascript】
css部分:
*{margin: 0;padding: 0;
}
body{background-image: url(../img/index.jpg);background-repeat: no-repeat;background-size: cover;
}
form{ margin: 150px auto;width: 500px;height: 300px;background-color: rgb(255, 255, 255,.3);border: 2px solid black;display: flex;flex-direction: column;justify-content: space-around;
}
form>div{margin:10px auto;font-size: 30px;height: 30px;line-height: 30px;
}
form>label{margin-left: 30px;display: flex;
}
form>label>input{width: 240px;
}
form>label>div{color: red;
}
form>button{margin:10px auto;text-align: center;font-size: 16px;height: 30px;width: 50px;line-height: 30px;background-color: transparent;
}html部分:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<link rel="stylesheet" href="../css/register.css">
<body><form action=""><div>注册页面</div><label>用 户 名:<input id="username" type="text" name="username" value="" placeholder="长度4~12，英文大小写字母" onblur="checkUsername()"><div id="showusername"></div></label><label>密  码:<input id="pwd" type="password" name="pwd" value="" placeholder="长度6~12,大小写字母、数字或下划线" onblur="checkPwd()"><div id="showpwd"></div></label><label>确认密码:<input type="password" id="repwd" name="repwd" value="" placeholder="请在此输入密码进行确认" onblur="checkRepwd()"><div id="showrepwd"></div></label><label>电  话:<input type="text" id="tel" name="tel" value="" placeholder="13、14、15、17、18开头的11位手机号" onblur="checkTel()"><div id="showtel"></div></label><label>邮  箱:<input type="text" id="email" name="email " value="" placeholder="用户名@域名（域名后缀至少2个字符） " onblur="checkEmail()"><div id="showemail"></div></label><button id="submit">提交</button></form><script src="../javascript/register.js"></script>
</body>
</html>javascript部分:
//跳转页面
var mysubmit=document.getElementById("submit")
mysubmit.onclick=function(evt){evt.preventDefault()console.log(checkAll())if(checkAll()==true){window.location.href="../html/index.html"
}else{alert("输入信息有误，请重新输入！")}
}
//校验
function checkAll(){
//所有的方法都返回true，这个方法才返回trueif(checkUsername() && checkPwd() && checkRepwd() && checkTel() && checkEmail()){return true
}
}//检查用户名
function checkUsername(){var reg=/^[a-zA-Z]{4,12}$/var value = document.getElementById("username").valueconsole.log(document.getElementById("username").value)// console.log(document.getElementsByName("username").value)if (reg.test(value)==false) {document.getElementById('showusername').innerHTML = "用户名不正确"return false}else {document.getElementById("showusername").innerHTML = ""return true}
}//检查密码function checkPwd(){var reg=/^\\w{6,20}$/var value = document.getElementById("pwd").valueconsole.log(document.getElementById("pwd").value)if (reg.test(value)==false) {document.getElementById('showpwd').innerHTML = "密码不正确"return false}else {document.getElementById("showpwd").innerHTML = ""return true}}//检查确认密码function checkRepwd(){var value = document.getElementById("pwd").valuevar repwdvalue=document.getElementById("repwd").valueif (repwdvalue!==value) {// console.log(checkPwd.value)document.getElementById('showrepwd').innerHTML = "两次密码不一样"return false}else {document.getElementById("showrepwd").innerHTML = ""return true}}//检查电话function checkTel(){var reg=/^1[34578]\\d{9}$/var value = document.getElementById("tel").valueif (reg.test(value)==false) {document.getElementById('showtel').innerHTML = "电话格式不正确"return false}else {document.getElementById("showtel").innerHTML = ""return true}}//检查邮箱function checkEmail(){var reg=/[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/var value = document.getElementById("email").valueif (reg.test(value)==false) {document.getElementById('showemail').innerHTML = "邮箱格式不正确"return false}else {document.getElementById("showemail").innerHTML = ""return true}}
