JS实现登陆验证的主要代码及思路

window.onload = function(){

// 获取input标签
var alInput = document.getElementsByTagName("input");
var oName = alInput[0];
var pwd = alInput[1];
var pwd2 = alInput[2];

// 获取p标签
var alMeg = document.getElementsByTagName("p");
var oName_alMeg = alMeg[0];
var pwd_alMeg = alMeg[1];
var pwd2_alMeg = alMeg[2];

// 获取ul, li标签
var alul = document.getElementById("ul");
var alLi = document.getElementsByTagName("li");
var li1 = alLi[0];
var li2 = alLi[1];
var li3 = alLi[2];

var re = /[^\w\u4e00-\u9fa5]/g;//用户名允许出现W(字母、数字、下划线）和汉字
var re_n = /[^\d]/g;//不是数字
var re_a = /[^a-zA-Z]/g;//不是字母
var count = document.getElementById("iCount");
var nameLength = 0;
var temp = 0;
var num = 0;

// 统计输入字符数，\x00-xff的意思为单字节，统计不是单字节，并转化为双字节
function getLength(str){
return str.replace(/[^\x00-xff]/g,"xx").length;
}
// 字符比对方法，用于后续程序判断是否输入相同字符
function strCompare(str,n){
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) == n) {
temp++;
}
}
return temp;
}

// 鼠标聚焦
oName.onfocus = function(){
oName_alMeg.style.visibility = "visible";
}

// 抬起键盘，也就是输入了一个字
oName.onkeyup = function(){
count.style.visibility = "visible";
nameLength = getLength(this.value);
count.innerHTML = nameLength+"个字符";
if (nameLength == 0) {
count.style.visibility = "hidden";
}
}

//当失去焦点
oName.onblur = function(){
count.style.visibility = "hidden";
// 含有非法字符
var re = /[^\w\u4e00-\u9fa5]/g; //正则表达式，判断是否含有非法字符
if (re.test(this.value)) {
oName_alMeg.innerHTML = "错误，含有非法字符";
}
// 不能为空
else if (nameLength == 0) {
oName_alMeg.innerHTML = "错误，用户名不能为空";
}
// 长度超过25个字符
else if (nameLength > 25) {
oName_alMeg.innerHTML = "错误，用户名不能超过25个字符";
}
// 长度少于6个字符
else if (nameLength < 6) {
oName_alMeg.innerHTML = "错误，用户名不能低于6个字符";
}
else{
oName_alMeg.innerHTML = "正确，用户名输入成功";
}
}

//密码框验证
pwd.onfocus = function(){
pwd_alMeg.style.visibility = "visible";
alul.style.visibility = "visible";
li1.style.background = 'red';
}
pwd.onkeyup = function(){
if (this.value.length > 0) {
pwd2.removeAttribute('disabled');//设置确认密码框能输入
pwd2_alMeg.style.visibility = "visible";
} else {
pwd2.setAttribute("disabled","disabled");//设置确认密码框不能输入
}
// 大于5个字符
if (this.value.length > 5) {
li2.style.background = 'red';
} else{
li2.style.background = 'orange';
};

// 大于10个字符
if (this.value.length > 10) {
li3.style.background = 'red';
} else{
li3.style.background = 'orange';
};

}
pwd.onblur = function(){
var j = strCompare(this.value,this.value[0]);
// 不能为空
if (this.value.length == 0) {
pwd_alMeg.innerHTML = "密码不能为空";
}

// 不能用相同字符
else if(j == this.value.length) {
pwd_alMeg.innerHTML = "错误,不能用相同字符";
}

// 长度应为6-16个字符
else if(this.value.length < 6 || this.value.length > 16) {
pwd_alMeg.innerHTML = "错误,密码长度应为6-16个字符";
}

// 不能全为数字 var re_n = /[^\d]/g;没有数字，非一下就是全为数字
else if (!re_n.test(this.value)) {
pwd_alMeg.innerHTML = "错误,密码不能全为数字";
}

// 不能全为字母
else if (!re_a.test(this.value)) {
pwd_alMeg.innerHTML = "错误,密码不能全为字母";
}
// OK
else{
pwd_alMeg.innerHTML = "OK";
}

}

// 确认密码框
pwd2.onblur = function(){
if (this.value != pwd.value) {
pwd2_alMeg.innerHTML = "两次输入密码不一致";
}else{
pwd2_alMeg.innerHTML = "成功";
}

}
}