初始注册页面
验证效果（所填信息是随便写的）
正确格式的效果（所填信息是随便写的）
点击注册按钮后效果
代码如下：
- 注册页面代码
<!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>注册</title>
<link rel="stylesheet" href="../css/register.css">
</head>
<body>
<div class="box">
<h1>注 册</h1>
<form method="get" action="../html/success.html" onsubmit="return tijiao()">
<p>请选择注册角色</p>
<input type="radio" name="object" value="student">学生
<input type="radio" name="object" value="teacher">老师
<input type="radio" name="object" value="manager">管理员
<p>用户名</p>
<input class="input_box username" type="text" name="username" placeholder=" 请输入用户名(6位字母、中文或者数字组成) *必填"/><br>
<span class="username1"></span>
<p>手机号</p>
<input class="input_box phone" name="phone" type="text" placeholder=" 请输入手机号(11位数字) *必填"/><br>
<span class="phone1"></span>
<p>邮箱</p>
<input class="input_box email" name="email" type="text" placeholder=" 请输入邮箱 *必填"/><br>
<span class="email1"></span>
<div class="mima">
<p>密码</p>
<input class="input_box password" name="password" type="password" placeholder=" 请输入密码(6-12位字母、下划线或者数字组成) *必填"/><br>
<span class="password1"></span>
<img src="../image/遮挡.png" alt="" class="tu">
</div>
<div class="mima">
<p>确认密码</p>
<input class="input_box nextpassword" type="password" placeholder=" 请再次输入密码 *必填"/><br>
<span class="nextpassword1"></span>
<img src="../image/遮挡.png" alt="" class="tu1">
</div>
<p>备注</p>
<textarea cols="65" rows="5" placeholder="备注（可以不填）"></textarea><br>
<input class="cm" type="checkbox"/>Check me out<br>
<input class="zc" type="submit" value="注册"/>
</form>
</div>
<script>
// 用户名检验函数
function usernameCheck(){
let str1 = username.value;
const bds1 = /^[\u4e00-\u9fa5a-zA-Z0-9]{6}$/;
if(str1 == ""){
return '用户名不能为空！'
}else if(str1.length < 6){
return '用户名少于6位!'
}else if(str1.length > 6){
return '用户名多于6位!'
}else if(bds1.test(str1)){
return '输入格式正确!'
}else{
return '输入格式错误!'
}
}
// 手机号检验函数
function phoneCheck(){
let str2 = phone.value;
const bds2 = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
const b = /[a-z]|[A-Z]/;
if(str2 === ""){
return '手机号不能为空！'
}else if(str2.length < 11){
return '手机号少于11位!'
}else if(str2.length > 11){
return '手机号多于11位!'
}else if(b.test(str2)){
return '手机号中不能有字母!'
}else if(bds2.test(str2)){
return '输入格式正确!'
}else{
return '输入格式错误!'
}
}
// 邮箱检验函数
function emailCheck(){
let str3 = email.value;
let bds3 =/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
let p = /[@]{1}/;
if(str3 == ""){
return '邮箱不能为空！'
} else if(bds3.test(str3)){
return '输入格式正确!'
}else if(!p.test(str3)){
return '缺少@！'
}else{
return '输入格式错误!'
}
}
// 密码检验函数
function passwordCheck(){
let str4 = password.value;
const bds4 = /^\w{6,12}$/ ;
const m = /^[0-9]{6,12}$/;
const n = /^([a-z]|[A-Z]){6,12}$/;
if(str4 === ""){
return '密码不能为空！'
}else if(str4.length < 6){
return '密码少于6位!'
}else if(str4.length > 12){
return '密码多于12位!'
}else if(m.test(str4)){
return '密码不能全是数字'
}else if(n.test(str4)){
return '密码不能全是字母'
}else if(bds4.test(str4)){
return '输入格式正确!'
}else{
return '输入格式错误!'
}
}
// 确认密码检验函数
function nextpasswordCheck(){
let str5 = password.value;
let str6 = nextpassword.value;
if(str6 == ""){
return '密码不能为空！'
}else if(str5 === str6){
return '输入正确!'
}else{
return '两次输入不同，请重新输入！'
}
}
// 获取对象
let username = document.querySelector(".username");
let phone = document.querySelector(".phone");
let email = document.querySelector(".email");
let password = document.querySelector(".password");
let nextpassword = document.querySelector(".nextpassword");
// 给用户名框设置失去焦点函数
username.onblur = function(){
let span1 = document.querySelector('.username1');
let s1 = usernameCheck();
if(s1 == '输入格式正确!'){
span1.style.color = 'green'
}else{
span1.style.color = 'red'
}
span1.innerHTML = s1
}
// 给手机号框设置失去焦点函数
phone.onblur = function(){
let span2 = document.querySelector('.phone1');
let s2 = phoneCheck();
if(s2 == '输入格式正确!'){
span2.style.color = 'green'
}else{
span2.style.color = 'red'
}
span2.innerHTML = s2
}
// 给邮箱框设置失去焦点函数
email.onblur = function(){
let span3 = document.querySelector('.email1');
let s3 = emailCheck();
if(s3 == '输入格式正确!'){
span3.style.color = 'green'
}else{
span3.style.color = 'red'
}
span3.innerHTML = s3
}
// 给密码框设置失去焦点函数
password.onblur = function(){
let span4 = document.querySelector('.password1');
let s4 = passwordCheck();
if(s4 == '输入格式正确!'){
span4.style.color = 'green'
}else{
span4.style.color = 'red'
}
span4.innerHTML = s4
}
// 给确认密码框设置失去焦点函数
nextpassword.onblur = function(){
let span5 = document.querySelector('.nextpassword1');
let s5 = nextpasswordCheck();
if(s5 == '输入正确!'){
span5.style.color = 'green'
}else{
span5.style.color = 'red'
}
span5.innerHTML = s5
}
// 设置点击注册按钮后的提交函数（必填信息填写完成后才能跳转页面）
function tijiao(){
if(usernameCheck() !== '用户名不能为空！' && phoneCheck() !== '手机号不能为空！' && emailCheck() !== '邮箱不能为空！' && passwordCheck() !== '密码不能为空！' && nextpasswordCheck() !== '两次输入不同，请重新输入！'){
return true
}else{
alert('请输入相关信息后再注册！')
return false
}
}
// 给密码框的遮挡图片添加点击事件，实现密码的显示
let tu = document.querySelector('.tu');
tu.onclick = function(){
if(password.type === 'password'){
password.type = 'text'
}else{
password.type = 'password'
}
}
let tu1 = document.querySelector('.tu1');
tu1.onclick = function(){
if(nextpassword.type === 'password'){
nextpassword.type = 'text'
}else{
nextpassword.type = 'password'
}
}
</script>
</body>
</html>- register.css
body{
margin:0;
padding:0;
box-sizing: border-box;
background: url("../image/1.jpg");
background-size: cover;
}
.box{
width:500px;
margin:30px auto;
}
.box h1{
text-align: center;
}
.box p{
font-size: 20px;
font-weight: 500;
}
.input_box{
width:30rem;
height: 1.7rem;
}
.cm{
margin-top:30px;
}
.zc{
width:98px;
height:40px;
background-color: aquamarine;
border:2px solid black;
margin-top:30px;
}
span{
font-size: 15px;
}
.mima{
position: relative;
}
.tu,.tu1{
position: absolute;
top:47px;
right:24px;
width: 30px;
height: 30px;
}- 跳转后的页面代码 success.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>
<style>
span{
color:rgb(223, 63, 229);
}
</style>
</head>
<body>
<h1>太棒了，恭喜你~~~~~</h1>
<h1><b></b>：<span></span> 注册成功！</h1>
<script>
function getValue(param) {
const exp = new RegExp('(^|&)' + param + '=([^&]*)(&|$)', 'i');
const outcome = window.location.search.substr(1).match(exp);
if (outcome != null) {
return decodeURI(outcome[2]);
}else{
return null;
}
}
let span = document.querySelector('span');
let b = document.querySelector('b');
span.innerHTML = getValue('username');
b.innerHTML = getValue('object');
</script>
</body>
</html>密码框遮挡图片：
遮挡图片来源：iconfont-阿里巴巴矢量图标库
背景图片来源：http://www.netbian.com/dongtai/index.htm
注意事项：
- 在获取对应input对象后，用console.log(对象.value)不能输出对应值，因为此时input框中还未输入内容。可以给对象添加onblur函数再来输出。
- 正则表达式定义时不能加引号。如果添加引号，const bds4 = ' /^\w{6,12}$/ ' 会报错.test is not function
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
