使用一些网站时，经常会遇到需要用户注册的情景，用户注册就需要网站对一些注册信息进行验证，比如，密码，邮箱等，那么，我们在制作网站时，该如何编写代码实现该需求呢？接下来，济南网站建设小编http://news.hcsw666.com/，就来为大家介绍一种通过JavaScript编程语言来实现该功能的小案例，有需要的朋友可以过来参考一下。
关键代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>注册页面表单验证</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
.register-box{
width: 420px;
margin: 60px auto;
padding: 30px;
border: 1px solid #eee;
border-radius: 8px;
}
h3{text-align: center;margin-bottom: 25px;color: #333;}
.item{margin: 15px 0;}
input{
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
button{
width: 100%;
padding: 11px;
background: #2385ff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 15px;
cursor: pointer;
}
button:hover{background: #1976d2;}
.err-text{
font-size: 13px;
color: red;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="register-box">
<h3>用户注册</h3>
<div class="item">
<input type="text" id="username" placeholder="请输入用户名">
<div class="err-text" id="userErr"></div>
</div>
<div class="item">
<input type="password" id="pwd" placeholder="请输入6-16位密码">
<div class="err-text" id="pwdErr"></div>
</div>
<div class="item">
<input type="password" id="repwd" placeholder="请再次输入密码">
<div class="err-text" id="rePwdErr"></div>
</div>
<div class="item">
<input type="text" id="phone" placeholder="请输入手机号码">
<div class="err-text" id="phoneErr"></div>
</div>
<div class="item">
<input type="text" id="email" placeholder="请输入邮箱地址">
<div class="err-text" id="emailErr"></div>
</div>
<button onclick="checkForm()">立即注册</button>
</div>
<script>
function checkForm(){
// 获取所有输入框和提示框
let username = document.getElementById('username').value.trim();
let pwd = document.getElementById('pwd').value.trim();
let repwd = document.getElementById('repwd').value.trim();
let phone = document.getElementById('phone').value.trim();
let email = document.getElementById('email').value.trim();
let userErr = document.getElementById('userErr');
let pwdErr = document.getElementById('pwdErr');
let rePwdErr = document.getElementById('rePwdErr');
let phoneErr = document.getElementById('phoneErr');
let emailErr = document.getElementById('emailErr');
// 清空所有错误提示
userErr.innerText = "";
pwdErr.innerText = "";
rePwdErr.innerText = "";
phoneErr.innerText = "";
emailErr.innerText = "";
// 正则规则
let userReg = /^[a-zA-Z0-9]{3,12}$/;
let pwdReg = /^.{6,16}$/;
let phoneReg = /^1[3-9]\d{9}$/;
let emailReg = /^\w+@\w+\.\w+$/;
// 校验用户名
if(!userReg.test(username)){
userErr.innerText = "用户名3-12位，仅字母数字";
return;
}
// 校验密码
if(!pwdReg.test(pwd)){
pwdErr.innerText = "密码长度必须6~16位";
return;
}
// 校验两次密码一致
if(pwd !== repwd){
rePwdErr.innerText = "两次输入密码不一致";
return;
}
// 校验手机号
if(!phoneReg.test(phone)){
phoneErr.innerText = "请输入正确11位手机号";
return;
}
// 校验邮箱
if(!emailReg.test(email)){
emailErr.innerText = "请输入标准邮箱格式";
return;
}
// 全部验证通过
alert("注册信息验证通过，提交成功！");
}
</script>
</body>
</html>
评论