表单验证：用户注册

// 判断输入字符的长度
function getLength(){
// 得到汉字的长度:\x00-xff 单字节
// [^\x00-xff]意思为双字节
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 pwd=ainput[1];
var pwd2=ainput[2];
var aP=document.get.getElementsByTagName('p');
var name_msg=aP[0];
var pwd_msg=aP[1];
var pwd2_msg=aP[2];
var count=document.getElementsById('count');
var aEm=document.getElementsByTagName("em");
var name_length=0;
// var str="adaewe";
// var re=/(a[d-g])(2)/}//匹配a字符，匹配d到g之间的字符，然后分成一组，并且这一组要出现两次，不区分大小写
// alert(re.test(str));//test函数验证匹配是否正确，返回一个布尔值

// 用户名输入框验证
// 1.数字，字母（不分大小写），汉字、下划线
// 2.5-25个字符，推荐使用中文会员名
//1用\w表示，2所有的汉字用\u4e00-\u9fa5的区间表示
var re=/[^\w\u4e00-\u9fa5]/g;//加上^匹配中括号中的所有的非法字符
// 交互行为（出现非法的字符后给用户提示信息）
//用户名:添加三个动作
//1:得到焦点时触发一个函数
oName.onfocus=function(){
// 当用户的输入框得到焦点的时候，让右侧的信息提示显示出来
name_msg.style.display="block";
// 把提示内容显示出来,i标签为图标
name_msg.innerHTML='<i class="ati"></i>5-25个字符，一个汉字为两个字符，推荐使用中文明'

}
// 当键盘抬起的时候触发一个函数(字符输入完成了)
oName.onkeyup=function(){
// 显示字符
count.style.visiblity="visible";
// 判断输入字符的长度
name_length=getLength(this.value);
// 统计字符的长度
count.innerHTML=name_length+"个字符";
// 假如没有输入就影藏字符统计的显示
if (name_length==0) {
count.style.visiblity="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 (name_length>25) {
name_msg.innerHTML='<i class="err"></i>长度不能超过25个字符';
}
else if (name_length<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(this.value.length>5){
aEm[1].className = "active";
pwd2.removeAttribute("disabled");
pwd2_msg.style.display = "inline";
}else{
aEm[1].className = "";
pwd2.setAttribute("disabled");
pwd2_msg.style.display = "none";
}

//大于10字符为“强”
if(this.value.length>10){
aEm[2].className = "active";
}else{
aEm[2].className = "";
}
}

pwd.onblur = function(){
var m = findStr(pwd.value, pwd.value[0]);

var reg_n = /[^\d]/g;
var reg_c = /[^a-zA-Z]/g;

//不能为空
if(this.value==""){
pwd_msg.innerHTML = '<i class="err"></i>不能为空！';
}
//不能用相同字符
else if(m == this.value.length){
pwd_msg.innerHTML = '<i class="err"></i>不能用相同字符！';
}
//长度应为6-16个字符
else if(this.value.length < 6 || this.value.length > 16){
pwd_msg.innerHTML = '<i class="err"></i>长度应为6-16个字符！';
}
//不能全为数字
else if(!reg_n.test(this.value)){
pwd_msg.innerHTML = '<i class="err"></i>不能全为数字！';
}
//不能全为字母
else if(!reg_c.test(this.value)){
pwd_msg.innerHTML = '<i class="err"></i>不能全为字母！';
}
//OK
else{
pwd_msg.innerHTML = '<i class="ok"></i>OK！';
}
}

//确认密码

pwd2.onblur = function(){
if(this.value != pwd.value){
pwd2_msg.innerHTML = '<i class="err"></i>两次输入的密码不一致！';
}else{
pwd2_msg.innerHTML = '<i class="ok"></i>OK！';
}
}
}

本js代码的html和CSS地址：http://www.cnblogs.com/xuxiaoxia/p/6440462.html