原生JS实现登陆注册的验证
程序员文章站
2022-04-18 14:33:16
...
原生JS实现登陆注册的验证
// An highlighted block
//邮箱验证仅支持163和QQ邮箱 如需验证其他格式邮箱可在理解代码的基础上进行完善 不足之处请多指教
var foo = 'bar';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
form{
width: 600px;
margin: 100px auto;
border:1px solid black;
height: 600px;
text-align:left;
padding-top: 50px;
position: relative;
background: #88bbff;
}
b{
display: inline-block;
width: 150px;
text-align: right;
margin-right: 20px;
}
input{
width: 300px;
height: 30px;
}
p{
margin-bottom: 20px;
font-size: 10px;
color: #ccc;
height: 10px;
margin-left: 170px;
}
input:nth-of-type(5){
width: 70px;
height: 30px;
margin-left: 170px;
}
span{
color: red;
font-size: 12px;
}
h1{
width: 100%;
text-align: center;
margin-bottom: 50px;
}
</style>
</head>
<body>
<form action="#">
<h1>注册</h1>
<b>邮箱地址</b><input type="text" id="email"><span id="tip1"></span><br>
<p>6~18个字符，可使用字母、数字、下划线，需以字母开头</p>
<b>密码</b><input type="password" id="pwd"><span id="tip2"></span><br>
<p>6~16个字符，区分大小写</p>
<b>确认密码</b><input type="password" id="repwd"><span id="tip3"></span><br>
<p>请再次填写密码</p>
<b>手机号码</b><input type="tel" id="phone"><span id="tip4"></span><br>
<p> </p>
<input type="submit" id="sub" value="注册">
</form>
</body>
<script>
var email = document.querySelector('#email');
var pwd = document.querySelector("#pwd");
var repwd = document.querySelector("#repwd");
var phone = document.querySelector("#phone");
var oBtn = document.querySelector("#sub");
//验证邮箱
email.onblur = function(){
if(email.value ==""){
document.querySelector("#tip1").innerText = "邮箱不能为空！";
return false;
}else if(!/^[a-z]/i.test(email.value)){
document.querySelector("#tip1").innerText = "请以字母开头！";
return false;
}else if(!/^[a-z]\w{5,17}@(163|qq)\.com$/i.test(email.value)){
document.querySelector("#tip1").innerText = "请输入6~18个字符！";
return false;
}else {
document.querySelector("#tip1").innerText = "";
return true;
}
}
//验证密码
pwd.onblur = function(){
if(pwd.value ==""){
document.querySelector("#tip2").innerText = "密码不能为空！";
return false;
}else if(!/\w{6,16}/.test(pwd.value)){
document.querySelector("#tip2").innerText = "请输入6~16个字符！";
return false;
}else{
document.querySelector("#tip2").innerText = "";
return true;
}
}
//再次输入密码
repwd.onblur = function(){
if(pwd.value != repwd.value){
document.querySelector("#tip3").innerText = "两次输入密码不一致！";
return false;
}else{
document.querySelector("#tip3").innerText = "";
return true;
}
}
//验证手机号码
phone.onblur = function(){
if(phone.value==""){
document.querySelector("#tip4").innerText = "手机号不能为空！";
return false;
}else if(!/^1[35789]\d{9}$/.test(phone.value)){
document.querySelector("#tip4").innerText = "手机号输入有误！";
return false;
}else{
document.querySelector("#tip4").innerText = "";
return true;
}
}
oBtn.onclick = function(){
if(email.value ==""){
document.querySelector("#tip1").innerText = "邮箱不能为空！";
return false;
}else if(pwd.value ==""){
document.querySelector("#tip2").innerText = "密码不能为空！";
return false;
}else if(repwd.value ==""){
document.querySelector("#tip3").innerText = "密码不能为空！";
return false;
}else if(phone.value ==""){
document.querySelector("#tip4").innerText = "手机号不能为空！";
return false;
}else{
document.querySelector("#tip1").innerText = "";
document.querySelector("#tip2").innerText = "";
document.querySelector("#tip3").innerText = "";
document.querySelector("#tip4").innerText = "";
return true;
}
}
</script>
</html>