注意点：
1、正则表达式的匹配
2、密码强度规则的设置
3、表单提交事件onsubmit
4、表单获取焦点事件onfocus、表单失去焦点事件onblur、表单输入事件oninput
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高仿百度注册页</title>
<style>
*{
margin:0;
padding:0;
}
form{
800px;
height: 300px;
border:1px solid #ccc;
margin-left:50px;
margin-top: 20px;
}
form div{
720px;
height: 42px;
margin-top: 20px;
}
form div>.left_info{
display: inline-block;
65px;
height: 42px;
line-height: 42px;
font-size: 14px;
color: #666;
font-weight: 700;
text-align: right;
float: left;
}
form div>input{
330px;
height: 38px;
font-size: 14px;
color: #666;
border: 1px solid #ddd;
float: left;
margin-left: 5px;
transition: 0.3s;
}
form div>input:focus{
outline: none;
border-color: #3f89ec;
}
form div>.tip_msg{
font-size: 12px;
color: #666;
float: left;
margin-left: 5px;
position: relative;
top:5px;
}
form div>.error{
font-size: 12px;
color: #f00;
float: left;
margin-left: 5px;
position: relative;
top: 5px;
}
form div>.success{
font-size: 20px;
color: #0f0;
float: left;
margin-left: 5px;
position: relative;
top: 5px;
}
form>input{
330px;
height: 45px;
background: #3F89EC;
border: none;
border-radius: 5px;
margin-top: 20px;
margin-left: 69px;
color: #fff;
font-size: 16px;
font-weight: 700;
cursor: pointer;
outline: none;
}
form>input:hover{
background: #4490f7;
}
</style>
</head>
<body>
<form action="1.php" method="post" id="reg">
<div>
<span class="left_info">用户名</span>
<input type="text" placeholder="请设置用户名" id="username">
<span class="tip_msg"></span>
</div>
<div>
<span class="left_info">密码</span>
<input type="password" placeholder="请设置登录密码" id="pwd">
<span class="tip_msg"></span>
</div>
<div>
<span class="left_info">确认密码</span>
<input type="password" placeholder="请再次输入密码" id="rePwd">
<span class="tip_msg"></span>
</div>
<input type="submit" value="注册">
</form>
</body>
<script>
//获取元素
var reg = document.getElementById('reg');
var username = document.getElementById('username');
var pwd = document.getElementById('pwd');
var rePwd = document.getElementById('rePwd');
//初始化三个变量isUserName、isPwd、isRepeatPwd分别表示用户名
//密码、重复密码是否都满足要求；初始化为false
var isUserName = false;
var isPwd = false;
var isRepeatPwd = false;
//以上3个变量同时为true,表单才可提交
reg.onsubmit = function(){
if(!isUserName && !isPwd && isRepeatPwd){
return false;
}
}
//用户名
username.onfocus = function(){
var span = this.nextElementSibling;
span.innerHTML = '设置后不可更改<br />中英文均可，最长14个英文或7个汉字';
span.className = 'tip_msg';
}
username.onblur = function(){
//鼠标失去焦点后，判断用户名是否是合法的
/**
**判断用户名
*1、首先获取用户名
*2、判断用户名是否合法
2.1 用户名不能为空
2.2 用户名不能是除了中英文、数字、下划线以外的其他字符
2.3 用户名不能为纯数字
2.4 字符串长度为7-12位(中文+2,英文+1)
**/
var span = this.nextElementSibling;
var userInputName = this.value.trim();
var reg1 = /[^u4e00-u9fa5w]/i;
var reg2 = /D/;
var reg3 = /[u4e00-u9fa5]/;
var len = 0;
//遍历用户名，已确定用户名长度是否合法
for(var i in userInputName){
if(reg3.test(userInputName[i])){
len += 2;
}else{
len += 1;
}
}
if(userInputName == ''){
//设置错误提示信息
span.innerHTML = '用户名不允许为空';
span.className = 'error';
//设置错误标志
isUserName = false;
//终止程序
return;
}
if(reg1.test(userInputName)){
//设置错误提示信息
span.innerHTML = '用户名仅支持中英文、数字和下划线';
span.className = 'error';
//设置错误标志
isUserName = false;
//终止程序
return;
}
if(!(reg2.test(userInputName))){
//设置错误提示信息
span.innerHTML = '用户名不能为纯数字';
span.className = 'error';
//设置错误标志
isUserName = false;
//终止程序
return;
}
if(len > 14){
//设置错误提示信息
span.innerHTML = '用户名不能超过14个字符';
span.className = 'error';
//设置错误标志
isUserName = false;
//终止程序
return;
}else{
//以上条件均满足
//设置正确提示信息
span.innerHTML = '√';
span.className = 'success';
//设置正确标志
isUserName = true;
}
}
//密码
pwd.onfocus = function(){
//设置提示信息
var span = this.nextElementSibling;
span.innerHTML = '不允许为空，6-14个字符';
span.className = 'tip_msg';
}
pwd.oninput = function(){
var span = this.nextElementSibling;
var pwdValue = this.value;
var reg1 = /s/; //匹配任意一个空白符
var reg2 = /^[S]{6,14}$/i;
/**
**判断密码是否合法
**1、密码不允许为空
**2、长度为6-14位
**/
if(reg1.test(pwdValue)){
//设置错误提示信息
span.innerHTML = '密码不允许有空格';
span.className = 'error';
//设置错误标志
isPwd = false;
//终止程序
return;
}
if(!(reg2.test(pwdValue))){
//设置错误提示信息
span.innerHTML = '长度为6-14个字符';
span.className = 'error';
//设置错误标志
isPwd = false;
//终止程序
return;
}else{
//判断密码强度
var reg3 = /d/; //检测纯数字
var reg4 = /[a-z]/i; //检测纯字母
var reg5 = /[^a-zd]/i; //检测其他字符
var rate = 0;
if(reg3.test(pwdValue)){
rate += 1;
}
if(reg4.test(pwdValue)){
rate += 1;
}
if(reg5.test(pwdValue)){
rate += 1;
}
switch(rate){
case 1:
span.innerHTML = '√———弱';
break;
case 2:
span.innerHTML = '√———中';
break;
case 3:
span.innerHTML = '√———强';
break;
}
span.className = 'success';
//设置正确标志
isPwd = true;
}
}
//重复密码
rePwd.onfocus = function(){
var span = this.nextElementSibling;
span.innerHTML = '确认密码与原密码必须保持一致';
span.className = 'tip_msg';
}
rePwd.onblur = function(){
var span = this.nextElementSibling;
var rePwdValue = this.value;
var originalPwd = pwd.value;
console.log(originalPwd);
/**
**判断重复密码
**1、不为空
**2、与原密码保持一致
**/
if(rePwdValue == ''){
//设置错误提示信息
span.innerHTML = '确认密码不能为空';
span.className = 'error';
//设置错误标志
isRepeatPwd = false;
//终止程序
return;
}
if(!(rePwdValue === originalPwd)){
//设置错误提示信息
span.innerHTML = '确认密码与原密码不一致';
span.className = 'error';
//设置错误标志
isRepeatPwd = false;
//终止程序
return;
}else{
//设置正确提示信息
span.innerHTML = '√';
span.className = 'success';
//设置错误标志
isRepeatPwd = true;
}
}
</script>
</html>