验证密码强度
css
#dv{
width: 300px;
height:200px;
position: absolute;
left:300px;
top:100px;
}
.strengthLv0 {
height: 6px;
width: 120px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv1 {
background: red;
height: 6px;
width: 40px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv2 {
background: orange;
height: 6px;
width: 80px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv3 {
background: green;
height: 6px;
width: 120px;
border: 1px solid #ccc;
padding: 2px;
}
html
<div id="dv">
<label for="pwd">密码</label>
<input type="text" id="pwd" maxlength="16"><!--课外话题-->
<div>
<em>密码强度:</em>
<em id="strength"></em>
<div id="strengthLevel" class="strengthLv0"></div>
</div>
</div>
js
function my$(id) {
return document.getElementById(id);
}
my$("pwd").οnkeyup=function () {
my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0);
};
function getLvl(pwd) {
var lvl=0;//默认是0级
//密码中是否有数字,或者是字母,或者是特殊符号
if(/[0-9]/.test(pwd)){
lvl++;
}
//判断密码中有没有字母
if(/[a-zA-Z]/.test(pwd)){
lvl++;
}
//判断密码中有没有特殊符号
if(/[^0-9a-zA-Z_]/.test(pwd)){
lvl++;
}
return lvl;//最小的值是1,最大值是3
}
案例效果
验证用户输入是不是邮箱
html
请您输入邮箱地址:<input type="text" value="" id="email"/> *<br/>
js
//如果输入的是邮箱,那么背景颜色为绿色,否则为红色
//获取文本框,注册失去焦点的事件
document.getElementById("email").onblur = function () {
//判断这个文本框中输入的是不是邮箱
var reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;
if (reg.test(this.value)) {
this.style.backgroundColor = "green";
} else {
this.style.backgroundColor = "red";
}
};
案例效果
验证用户输入的是不是中文名字
html
请输入您的名字:<input type="text" value="" id="userName" />*<br/>
js
//是中文名字,则绿色,否则红色
document.getElementById("userName").οnblur=function () {
var reg=/^[\u4e00-\u9fa5]{2,6}$/;
if(reg.test(this.value)){
this.style.backgroundColor="green";
}else{
this.style.backgroundColor="pink";
}
};
案例效果
验证表单
css
body {
background: #ccc;
}
label {
width: 40px;
display: inline-block;
}
span {
color: red;
}
.container {
margin: 100px auto;
width: 400px;
padding: 50px;
line-height: 40px;
border: 1px solid #999;
background: #efefef;
}
span {
margin-left: 30px;
font-size: 12px;
}
.wrong {
color: red
}
.right {
color: green;
}
.defau {
width: 200px;
height: 20px;
}
.de1 {
background-position: 0 -20px;
}
html
<div class="container" id="dv">
<label for="qq">Q Q</label><input type="text" id="qq"><span></span><br/>
<label>手机</label><input type="text" id="phone"><span></span><br/>
<label>邮箱</label><input type="text" id="e-mail"><span></span><br/>
<label>座机</label><input type="text" id="telephone"><span></span><br/>
<label>姓名</label><input type="text" id="fullName"><span></span><br/>
</div>
js
function my$(id) {
return document.getElementById(id);
}
//qq的
checkInput(my$("qq"),/^\d{5,11}$/);
//手机
checkInput(my$("phone"),/^\d{11}$/);
//邮箱
checkInput(my$("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
//座机号码
checkInput(my$("telephone"),/^\d{3,4}[-]\d{7,8}$/);
//中文名字
checkInput(my$("fullName"),/^[\u4e00-\u9fa5]{2,6}$/);
//给我文本框,给我这个文本框相应的正则表达式,我把结果显示出来
//通过正则表达式验证当前的文本框是否匹配并显示结果
function checkInput(input,reg) {
//文本框注册失去焦点的事件
input.οnblur=function () {
if(reg.test(this.value)){
this.nextElementSibling.innerText="正确了";
this.nextElementSibling.style.color="green";
}else{
this.nextElementSibling.innerText="让你得瑟,错了吧";
this.nextElementSibling.style.color="red";
}
};
}
案例效果