贴个源码了
html代码部分
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>淘宝用户注册</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" media="screen" href="../表单验证/css/style.css" /><script src="../表单验证/js/script.js"></script></head><body><form action=""><div><label for=""><span class="title">会员名：</span><input type="text" class="text"></label><p class="msg"><i class="ati"></i>5-25个字符，1个汉字为两个字符，推荐使用中文会员名</p></div><div><label for=""><span></span><b id="count">0个字符</b></label></div><div><label for=""><span class="title">登录密码：</span><input type="password" class="text"></label><p class="msg"><i class="ati"></i></p></div><div id="tips"><label for=""><span></span><em class="active">弱</em><em>中</em><em>强</em></label></div><div class="margin"><label for=""><span class="title">确认密码：</span><input type="password" class="text" disabled="false"></label><p class="msg"><i class="ati"></i>请再输入一次</p></div><div class="margin"><label for=""><span class="title">验证码：</span><input type="text" class="text checkimg"></label><img src="../表单验证/images/1.png"><a href="javascript:;"class="changeImg" title="重新获取验证码"></a></div><div class="margin"><input type="submit" id="submitBtn" class="submitBtn btn" value="同意协议并注册"></div></form></body></html>
css代码部分
form{width: 600px;margin: 100px auto;}input{width: 160px;height: 26px;line-height: 26px;font-size: 14px;font-family: "微软雅黑"；}.title{display: inline-block;width: 80px;text-align: right;}p{display: none;font-size: 12px;color: gray;width: 300px;float: right;line-height: 28px;vertical-align: top;margin: 2px 30px 0 0;}#count{padding-left: 80px;font-size: 12px;color: gray;line-height: 28px;visibility: hidden;}em{display: inline-block;width: 54px;height: 20px;background-color: rgb(255, 204, 157);margin-right: 2px;font-size: 12px;font-style: normal;text-align: center;height: 14px;line-height: 14px;color: white;}.active{background-color: rgb(255, 95, 2);}#tips{padding-left: 82px;}img{height: 30px;vertical-align: middle;}.checkimg{width: 100px;}#submitBtn{border: 1px solid rgb(255, 95, 2);width: 166px;height: 30px;background-color: rgb(255, 95, 2);color: white;margin-left: 80px;}.margin{margin-top: 20px;}.msg{display: none;}.err{display: inline-block;width: 14px;height: 14px;background: url(../images/no.jpg) no-repeat center center ;vertical-align: middle;}.ati{display: inline-block;width: 14px;height: 14px;background: url(../images/ati.png) no-repeat center center ;vertical-align: middle;}.ok{display: inline-block;width: 14px;height: 14px;background: url(../images/ok.png) no-repeat center center ;vertical-align: middle;}js代码部分
window.onload = function () {var oInputs = document.getElementsByTagName('input');var oName = oInputs[0];var pwd = oInputs[1];var pwdCon = oInputs[2];var oPs = document.getElementsByTagName('p');var name_msg = oPs[0];var pwd_msg = oPs[1];var pwdCon_msg = oPs[2];var name_count = document.getElementById('count');var oEms = document.getElementsByTagName('em');var name_length = 0;
//用户名检查
oName.onfocus = function () {name_msg.style.display = "block";name_msg.innerHTML = '<i class="ati"></i>5-25个字符，1个汉字为两个字符，推荐使用中文会员名';}oName.onkeyup = function () {name_count.style.visibility = 'visible';name_length = getLength(this.value);if (name_length > 0) {name_count.innerHTML = name_length + '个字符';} else {name_count.style.visibility = 'hidden';}}oName.onblur = function () {
//含有非法字符
var re = /[^\w\u4e00-\u9fa5]/g;if (re.test(this.value)) {name_msg.innerHTML = '<i class="err"></i>含有非法字符！';}//不能为空else if (this.value == '') {name_msg.innerHTML = '<i class="err"></i>不能为空！';}
//长度超过25字符
else if (getLength(this.value) > 25) {name_msg.innerHTML = '<i class="err"></i>不能超过25个字符！';}
//长度少于6个字符
else if (getLength(this.value) < 6) {name_msg.innerHTML = '<i class="err"></i>不能少于6个字符！';}//OK?
else {name_msg.innerHTML = '<i class="ok"></i>ok！';}}
// 密码输入框检查
pwd.onfocus = function () {pwd_msg.style.display = 'block';pwd_msg.innerHTML = '<i class="ati"></i>6-16个字符，请使用字母加数字或符号的组合密码，不能单独使用字母、数字或符号';}pwd.onkeyup = function () {
//大于5个字符为“中”
if (getLength(this.value) > 5) {for (var i = 0; i < oEms.length; i++) {oEms[i].className = '';}oEms[1].className = 'active';pwdCon.disabled = false;pwdCon_msg.style.display = 'block';}
// 大于10个字符为“强”
if (getLength(this.value) > 10) {for (var i = 0; i < oEms.length; i++) {oEms[i].className = '';}oEms[2].className = 'active';pwdCon.disabled = false;pwdCon_msg.style.display = 'block';}
//小于5个字符为“弱”
if (getLength(this.value) <= 5) {for (var i = 0; i < oEms.length; i++) {oEms[i].className = '';}oEms[0].className = 'active';pwdCon.disabled = true;pwdCon.value = '';pwdCon_msg.style.display = 'none';}}pwd.onblur = function () {var pwdValue = this.value;var strLen = repeatStr(pwdValue, pwdValue.charAt(0));var re_n = /[^\d]/g;var re_w = /[^a-zA-Z_]/g;if (pwdValue.length < 6 || pwdValue.length > 16) {pwd_msg.innerHTML = '<i class="err"></i>长度应为6-16之间！';} else if (strLen == pwdValue.length) {pwd_msg.innerHTML = '<i class="err"></i>不能使用相同字符！';} else if (pwdValue == '') {pwd_msg.innerHTML = '<i class="err"></i>不能为空';} else if (!re_n.test(pwdValue)) {pwd_msg.innerHTML = '<i class="err"></i>不能全为数字';} else if (!re_w.test(pwdValue)) {pwd_msg.innerHTML = '<i class="err"></i>不能全为字母';} else {pwd_msg.innerHTML = '<i class="ok"></i>OK！';}}
//确认密码输入框检查
pwdCon.onblur = function () {if (this.value != pwd.value) {pwdCon_msg.innerHTML = '<i class="err"></i>两次输入的密码不一致！';} else {pwdCon_msg.innerHTML = '<i class="ok"></i>OK！';}}
// 检查字符串是否完全由一个字符组成
function repeatStr(str, chr) {var len = 0;for (var i = 0; i < str.length; i++) {if (str.charAt(i) == chr) {len++;}}return len;}
// 检查返回字符串的字节长度，处理双字节字符长度
function getLength(str) {return str.replace(/[^\x00-xff]/g, 'xx').length;}}
