以下为js代码,HTML和css未粘贴~ 主要原理为:判断input输入框获得焦点、按键移开、失去焦点三种情况
window.οnlοad=function () {
var Ps=document.getElementsByTagName('p');
var nameMsg=Ps[0]; //第一次输入用户名的提醒
var psdMsg1=Ps[1]; //第一次输入密码的提醒
var psMsg2=Ps[2]; //核对密码的提醒
var number=Ps[3];
var Inputs=document.getElementsByTagName('input');
var inputName=Inputs[0]; //用户名
var inputPassWord=Inputs[1]; //密码框
var checkWord=Inputs[2]; //核对密码
var pic=Inputs[4]; //验证码图片的输入框
var phone=Inputs[3];
var Em=document.getElementsByTagName('em'); //密码强度的三个级别
var much=document.getElementById('much'); //密码级别所在的div
var count=document.getElementById('count'); //实时计算用户名的长度
var reg = /[^\w\u4e00-\u9fa5]/g; //非法字符的正则表达式
var numReg = /^1[3|4|5|8][0-9]\d{4,8}$/g; //手机号码的正则表达式
var length=0; //用户名的长度
var psw=0; //密码的长度
//用户名输入框的情况
inputName.οnfοcus=function () { //鼠标移入时
nameMsg.style.display='block'; //提醒段出现
nameMsg.innerHTML='请输入5-25个字符!'
};
inputName.οnkeyup=function () {
much.style.visibility='visible';
length=getLength(this.value); //获取长度并实时显示在下方
count.innerHTML=length+"个字符";
if(length===0){
much.style.visibility='hidden'; //显示长度的div隐藏
}
};
inputName.οnblur=function () {
much.style.visibility='hidden';
if(reg.test(this.value)){
nameMsg.innerHTML='名称中含有非法字符!'
}else if(length<6){ //不能少于5个字符
nameMsg.innerHTML='名称少于6个字符!'
}else if(length>25){ //不能超过25字符
nameMsg.innerHTML='名称超过25个字符!'
}else{
nameMsg.innerHTML='OK!';
inputPassWord.removeAttribute('disabled') //用户名合法通过后才能输入密码
}
};
//密码框输入情况判断
inputPassWord.οnfοcus=function () {
psdMsg1.style.display='block'; //鼠标移入密码输入框
psdMsg1.innerHTML='请输入5-15个字符!'
};
inputPassWord.οnkeyup=function () {
var psw=getLength(this.value);
if(psw<5){ //通过密码长度进行级别判断
Em[0].style.backgroundColor='red';
}else if(psw >= 5 && psw < 10){
Em[1].style.backgroundColor='red';
}else if(psw>=10){
Em[2].style.backgroundColor='red';
}
};
// 失去焦点时
inputPassWord.οnblur=function () {
//非法字符
psw=getLength(this.value);
if(reg.test(this.value)){
psdMsg1.innerHTML='名称中含有非法字符!'
}else if(psw<6){ //不能少于5个字符
psdMsg1.innerHTML='名称少于6个字符!'
}else if(psw>15){ //不能超过15字符
psdMsg1.innerHTML='名称超过15个字符!'
}else{
psdMsg1.innerHTML='OK!';
checkWord.removeAttribute('disabled') //密码通过才能再次输入
}
};
//密码核对框,再次输入密码
checkWord.οnfοcus=function () {
psMsg2.style.display='block';
psMsg2.innerHTML='请再次输入密码!'
};
checkWord.οnblur=function () {
if(this.value!==inputPassWord.value){
psMsg2.innerHTML='两次输入的密码不一致!'
}else{
psMsg2.innerHTML='OK!';
phone.removeAttribute('disabled') //第二密码通过才能输入验证码
}
};
//手机号码框输入情况判断
phone.οnfοcus=function () {
number.style.display='block'; //鼠标移入密码输入框
number.innerHTML='请输入手机号码!'
};
phone.οnkeyup=function () {
var phoneLength=getLength(this.value);
if(phoneLength !==11) {
number.innerHTML='手机号码不正确!'//通过密码长度进行级别判断
}
};
// 失去焦点时
phone.οnblur=function () {
//非法字符
var phoneLength=getLength(this.value);
if(!numReg.test(this.value)){
number.innerHTML='名称中含有非法字符!'
}else{
number.innerHTML='OK!';
pic.removeAttribute('disabled') //通过后移除输入框的禁用
}
};
//获取传入的字符串长度 正则表达式转换
function getLength(str) {
return str.replace(/[^\x00-xff]/g,'xx').length;
}
};