<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/* 整体内容布局 */
.pAll {
font-family: "黑体";
margin: 50px auto;
}
/* 新用户注册这几个字 */
#titles {
font-weight: bold;
font-size: 18px;
height: 50px;
line-height: 50px;
background: #fff9f3;
text-align: center;
border: 1px solid #ccc;
}
/* 所有内容都在这个id下面 */
#contents {
margin-top: 20px;
background: #fff9f3;
border: 1px solid #ccc;
}
/*p标签，每个内容在不同的 p标签 */
#form-itemGroup {
padding: 10px;
}
/* p下面的label文字，用户名，密码 确认 手机号 */
#form-itemGroup label {
display: inline-block;
width: 100px;
height: 32px;
line-height: 32px;
color: #666;
text-align: right;
}
/*现在所有input输入框的类都是username*/
#form-itemGroup .userName {
width: 200px;
height: 40px;
line-height: 40px;
border: 1px solid #ccc;
}
/* 请输入真实的用户名 */
#form-itemGroup .default {
width: 200px;
height: 32px;
line-height: 32px;
color: #999;
}
/* error和success是定义了还没使用的类 */
/* 要用的时候，直接改成class = "success" */
/* 类后面加上这个error，文字变红 */
#form-itemGroup .error {
height: 32px;
line-height: 32px;
color: #f00;
}
/* 加上这个类error，边框变红 */
#form-itemGroup input.error {
outline-color: #f00;
border-color: #f00;
}
/*类名 后面加上了success文字变绿 */
#form-itemGroup .success {
height: 32px;
line-height: 32px;
color: #096;
}
/* input原有的类后面加上success就变成绿色 */
#form-itemGroup input.success {
outline-color: #096;
border-color: #096;
}
/* 点击注册按钮的样式 */
.pBtn {
margin-top: 20px;
margin-left: 200px;
width: 100px;
height: 32px;
line-height: 32px;
background-color: #f93;
margin-bottom: 10px;
color: #ffffff;
font-weight: bold;
border: none;
}
form {
margin-left: 500px;
}
</style>
</head>
<body>
<div class="pAll">
<div id="titles">新用户注册</div>
<div id="contents">
<form action="#" onSubmit="">
<!-- form里面有用户名，密码，确认密码，手机号 -->
<p id="form-itemGroup">
<label for="userName">用户名：</label>
<input type="text" id="userName" class="userName" />
<span class="default" id="nameErr">请输入真实姓名</span>
</p>
<!-- 密码 -->
<p id="form-itemGroup">
<label for="userPassword">密码：</label>
<input type="password" id="userPassword" class="userName" />
<span class="default" id="passwordErr"
>6到20个字符，至少包含一位数字，一个大写字母，一个小写字母和一个特殊符号（@＃$％）</span
>
</p>
<!-- 确认密码 -->
<p id="form-itemGroup">
<label for="userConfirmPassword">确认密码：</label>
<input type="password" id="userConfirmPassword" class="userName" />
<span class="default" id="conPasswordErr"
>请再输入一遍密码, 必须和原密码保持一致</span
>
</p>
<!-- 手机号 -->
<p id="form-itemGroup">
<label for="userPhone">手机号码：</label>
<input type="text" id="userPhone" class="userName" />
<span class="default" id="phoneErr">请输入11位手机号码</span>
</p>
<!-- 注册按钮 -->
<p>
<button type="submit" class="pBtn" id="PBtn">注册</button>
</p>
</form>
</div>
</div>
</body>
<script>
// 先判断用户民和用户名后面输入框
// 用户名输入框
var userName = document.getElementById("userName");
// 用户名输入框后面的文字
var nameErr = document.getElementById("nameErr");
// 密码输入框
var userPassword = document.getElementById("userPassword");
// 密码输入框后面的文字
var passwordErr = document.getElementById("passwordErr");
// 手机号输入框
var userPhone = document.getElementById("userPhone");
// 手机号输入框后面的文字
var phoneErr = document.getElementById("phoneErr");
var phoneRegex =
/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
// 先定义一个中文名正则
var nameRegex = /^([a-zA-Z0-9\u4e00-\u9fa5\·]{2,4})$/;
// 密码的正则表达式
var passwordRegex =
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[_!@#$%^&])[^ ]{6,20}$/;
// 确认密码的输入框
var userConfirmPassword = document.getElementById("userConfirmPassword");
// 确认密码框后面的文字
var conPasswordErr = document.getElementById("conPasswordErr");
// 当输入框失去焦点的时候，开始触发逻辑
// 先来写输入姓名的逻辑
// 把用户名输入框失去焦点的逻辑放在一个函数里，然后调用函数
// 方便多次使用
var checkUsername = function () {
userName.onblur = function () {
// 如果输入框里面没有文字
if (!userName.value) {
nameErr.innerHTML = "用户名不能为空";
this.className = "error";
return false;
}
// 如果输入框的文字不符合正则
if (!nameRegex.test(userName.value)) {
nameErr.innerHTML = "输入的格式不正确";
userName.className = "error";
return false;
}
// 有名字，格式也正确
nameErr.innerHTML = "输入正确！！！！";
userName.className = "success";
return true;
};
};
// 函数封装好了，当失去焦点的时候，执行这个函数
nameErr.onblur = checkUsername();
// 把所有的密码框的逻辑封装在一个函数里面，失去焦点的时候触发
var checkUserpassword = function () {
// 输入密码的逻辑
// 失去焦点的时候触发
userPassword.onblur = function () {
// 如果面为空
if (!userPassword.value) {
passwordErr.innerHTML = "密码不能为空!!!";
userPassword.className = "error";
return false;
}
// 密码框里面有值，但是不符合正则表达式
if (!passwordRegex.test(userPassword.value)) {
passwordErr.innerHTML = "密码格式不正确";
userPassword.className = "error";
return false;
}
// 有名字，格式也正确
passwordErr.innerHTML = "输入正确！！！！";
userPassword.className = "success";
return true;
};
};
passwordErr.onblur = checkUserpassword();
// 确认密码的逻辑
var checkconfirm = function () {
userConfirmPassword.onblur = function () {
// 确认密码框里面为空
if (!userConfirmPassword.value) {
conPasswordErr.innerHTML = "此项必填";
userConfirmPassword.className = "error";
return false;
}
// 如果有值，但是两次密码不一致
if (userConfirmPassword.value !== userPassword.value) {
conPasswordErr.innerHTML = "密码不一致";
userConfirmPassword.className = "error";
return false;
}
//否则就是 两次密码输入一致
userConfirmPassword.className = "success";
conPasswordErr.innerHTML = "密码一致";
return true;
};
};
conPasswordErr.onblur = checkconfirm();
//判断手机号
var checkPhone = function () {
userPhone.onblur = function () {
if (!userPhone.value) {
phoneErr.innerHTML = "此项必填";
userPhone.className = "error";
return;
}
if (!phoneRegex.test(userPhone.value)) {
phoneErr.innerHTML = "格式不对";
userPhone.className = "error";
return false;
}
userPhone.className = "success";
phoneErr.innerHTML = "输入正确";
return true;
};
};
phoneErr.onblur = checkPhone();
// from提交的时候，所有函数都一次执行一遍
var formObj = document.querySelector("form");
formObj.onsubmit = function () {
checkPhone() && checkUsername() && checkUserpassword() && checkconfirm();
// 阻止表单默认提交
return false;
};
</script>
</html>
