源代码我自己敲的
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/my.js" ></script>
</head>
<body>
<form>
<!--会员名-->
<div>
<label>
<span>会员名：</span>
<input type="text" class="text" />
</label>
<p class="msg">
<img src="img/ati.png" width="20" height="20">
5-25个字符，一个汉字为两个字符，推荐使用中文会员名
</p>
</div>
<div>
<label>
<span></span>
<b id="count">0个字符</b>
</label>
</div>
<!--密码-->
<div>
<label>
<span>登陆密码：</span>
<input type="password" class="text" />
</label>
<p class="msg">
<img src="img/ati.png" width="20" height="20">
5-25个字符，请使用字母加数字或符号组合密码，不能单独使用字母、数字或符号。
</p>
</div>
<div style="margin:3px 0 10px 0">
<label>
<span></span>
<em class="active">弱</em>
<em>中</em>
<em>强</em>
</label>
</div>
<!--确认密码-->
<div style="padding-bottom:20px">
<label>
<span>确认密码：</span>
<input type="password" class="text" disabled="" />
</label>
<p class="msg">
<img src="img/ati.png" width="20" height="20">
请再输一次
</p>
</div>
<!--验证码-->
<div>
<label>
<span>验证码：</span>
<input type="text" class="text" style="width:50px" />
<img class="ver_img" src="img/verification_code.png">
<a class="changeimg" href="#" title="重新获取验证码"></a>
</label>
</div>
<!--提交按钮-->
<div>
<input class="submitBtn btn" type="submit" value="同意协议并注册">
</div>
</form>
</body>
</html>
/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*main*/
body{
font-family: "微软雅黑"；
}
form{
float:left;
width: 1100px;
height: 500px;
margin:50px 200px;
}
form div{
overflow: hidden;
clear: both;
}
form div label{
float: left;
clear:both;
}
form div label .text{
width:161px;
height:26px;
padding:0 2px;
border:1px solid #ccc;
margin-top: 5px;
}
form div label b{
font-weight: normal;
font-size: 12px;
color:#ccc;
visibility: hidden;
}
form div em{
display: inline-block;
font-size: 12px;
text-align: center;
color: #fff;
vertical-align: middle;
font-style: normal;
width: 53px;
height:15px;
line-height: 15px;
background-color: #FFD099
}
form div .active{
background-color: #FF6600;
}
div span{
display:inline-block;
width: 120px;
text-align: right;
}
.submitBtn{
width:135px;
height:33px;
background-color:#F95712;
color: #fff;
margin:20px 0 0 80px;
}
.changeimg{
width: 22px;
height:22px;
display: inline-block;
vertical-align: middle;
background: url("img/refresh.png") no-repeat;
}
.msg{
line-height: 12px;
color:#999;
float: left;
margin-left: 5px;
margin-top:10px;
display: none;
}
.msg i{
display:inline-block;
vertical-align: middle;
width: 25px;
height: 20px;
}
.msg .err{
background:url(../img/err.png) no-repeat 2px -1px;
}
.msg .ok{
background:url(img/ok.png) no-repeat 2px -1px;
}
.ver_img{
height:35px;
width: 68px;
bottom: 0;
vertical-align: bottom;
}
function getLength(str){
return str.replace(/[^\x00-xff]/g,"xx").length;
}
function findStr(str,n){
var tmp=0;
for(var i=0;i<str.length;i++){
if(str.charAt(i)==n){
tmp++;
}
}
return tmp;
}
window.onload=function(){
var aInput=document.getElementsByTagName('input');
var oName=aInput[0];
var paw=aInput[1];
var paw2=aInput[2];
var aP=document.getElementsByTagName('p');
var name_msg=aP[0];
var pwd_msg=aP[1];
var pwd2_msg=aP[2];
var count=document.getElementById('count');
var aEm=document.getElementsByTagName('em');
var name_length=0;
//1.数字、字母（不分大小写）、汉字、下划线
//2.5-25字符，推荐使用中文会员名
//用户名
oName.onfocus=function(){
name_msg.style.display="block";
}
oName.onkeyup=function(){
count.style.visibility="visible";
name_length=getLength(this.value);
count.innerHTML=name_length+"个字符";
if(name_length==0){
count.style.visibility="hidden";
}
}
oName.onblur=function(){
//含有非法字符
var re=/[^\w\u4e00-\u9fa5]/g;
if(re.test(this.value)){
name_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>含有非法字符！';
}
//不能为空
else if(this.value==""){
name_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>不能为空！';
}
//长度超过25个字符
else if(name_length>=25){
name_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>长度超过25个字符！';
}
//长度少于6个字符
else if(name_length<=6){
name_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>长度少于6个字符！';
}
//OK
else{
name_msg.innerHTML='<i class="err"><img src="img/ok.png" width="20" height="20"></i>OK！';
}
}
//密码
paw.onfocus=function(){
pwd_msg.style.display="block";
}
paw.onkeyup=function(){
//大于5个字符为“中”
if(this.value.length>5){
aEm[1].className="active";
paw2.removeAttribute("disabled");
pwd2_msg.style.display="block";
}
else{
aEm[1].className="";
paw2.setAttribute("disabled","");
pwd2_msg.style.display="none";
}
//大于10个字符
if(this.value.length>10){
aEm[2].className="active";
}
else{
aEm[2].className="";
}
}
paw.onblur=function(){
var m=findStr(paw.value,paw.value[0]);
var re_n=/[^\d]/g;
var re_t=/[^a-zA-Z]/g;
//不能为空
if(this.value==""){
pwd_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>不能为空！';
}
//不能用相同字符
else if(m==this.value.length){
pwd_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>不能用相同字符！';
}
//长度应为6-16个字符
else if(this.value.length<6||this.value.length>16){
pwd_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>长度应为6-16个字符！';
}
//不能全为数字
else if(!re_n.test(this.value)){
pwd_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>不能全为数字！';
}
//不能全为字母
else if(!re_t.test(this.value)){
pwd_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>不能全为字母！';
}
//OK
else{
pwd_msg.innerHTML='<i class="err"><img src="img/ok.png" width="20" height="20"></i>OK！';
}
}
//确认密码
paw2.onblur=function(){
if(this.value!=paw.value){
pwd2_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>两次输入密码不一致！';
}
else{
pwd2_msg.innerHTML='<i class="err"><img src="img/ok.png" width="20" height="20"></i>OK！';
}
}
}
