<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
body {
background: #ccc;
}
label {
width: 40px;
display: inline-block;
}
.container {
margin: 100px auto;
width: 400px;
padding: 50px;
line-height: 40px;
border: 1px solid #777;
background: #efefef;
}
span {
margin-left: 25px;
font-size: 12px;
padding: 2px 20px 0;
color: #ccc;
}
.right {
color: green;
background: url(images/right.png) no-repeat;
}
.wrong {
color: red;
background: url(images/wrong.png) no-repeat;
}
.pwd {
width: 220px;
height: 20px;
background: url(images/strong.jpg) no-repeat;
}
.str1 {
background-position: 0 -20px;
}
.str2 {
background-position: 0 -40px;
}
.str3 {
background-position: 0 -60px;
}
.str4 {
background-position: 0 -80px;
}
</style>
</head>
<body>
<div class="container">
<label for="inp1">QQ</label><input type="text" name="" id="inp1"><span>输入正确的QQ号码</span><br>
<label for="inp2">手机</label><input type="text" name="" id="inp2"><span>输入13位手机号</span><br>
<label for="inp3">邮箱</label><input type="text" name="" id="inp3"><span>输入正确邮箱</span><br>
<label for="inp4">座机</label><input type="text" name="" id="inp4"><span>输入您的座机</span><br>
<label for="inp5">账号</label><input type="text" name="" id="inp5"><span>亲输入您的账号</span><br>
<label for="inp6">密码</label><input type="text" name="" id="inp6"><span>请输入您的密码</span><br>
<div id="password" class="pwd"></div>
</div> <script type="text/javascript">
var password = document.getElementById("password"); //qq号
addEvent("inp1",function(){
if (/^[1-9][0-9]{4,}$/.test(this.value)) {
setClassInner(this,"right","恭喜您,输入正确！");
}else {
setClassInner(this,"wrong","格式错误！");
}
}); //手机号
addEvent("inp2",function(){
if (/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/.test(this.value)) {
setClassInner(this,"right","恭喜您,输入正确！");
}else {
setClassInner(this,"wrong","格式错误！");
}
}); //邮箱
addEvent("inp3",function(){
if (/^[\w\-\.]{5,}\@[\w]+\.[\w]{2,4}$/.test(this.value)) {
setClassInner(this,"right","恭喜您,输入正确！");
}else {
setClassInner(this,"wrong","格式错误！");
}
}); //座机
addEvent("inp4",function(){
if (/(^0\d{2}-8\d{7}$)|(^0\d{3}-3\d{6}$)/.test(this.value)) {
setClassInner(this,"right","恭喜您,输入正确！");
}else {
setClassInner(this,"wrong","格式错误！");
}
}); //账号
addEvent("inp5",function(){
if (/^[a-zA-Z0-9_-]{3,16}$/.test(this.value)) {
setClassInner(this,"right","恭喜您,输入正确！");
}else {
setClassInner(this,"wrong","格式错误！");
}
}); //密码
addEvent("inp6",function(){
if (/^[a-zA-Z0-9_\-$]{6,18}$/.test(this.value)) {
setClassInner(this,"right","恭喜您,输入正确！");
password.className = "pwd str1";
//只有密码通过了，才能执行密码强度测试
//从大往小判断
if (/^[A-Za-z0-9]+[_$][A-Za-z0-9]*$/.test(this.value)) {
password.className = "pwd str4";
}else if (/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/.test(this.value)) {
password.className = "pwd str3";
}else if (/^([a-z].*[A-Z])|([A-Z].*[a-z])$/.test(this.value)) {
password.className = "pwd str2";
}
}else {
setClassInner(this,"wrong","格式错误！");
}
}); //封装重复代码
function addEvent(str,fn){
document.getElementById(str).onblur = fn;
}
function setClassInner(aaa,rw,txt){
var span = aaa.nextElementSibling || aaa.nextSibling;
span.className = rw;
span.innerHTML = txt;
}
</script>
</body>
</html>