javascript 正则表达式+表单验证 结合运用简单例子

以下为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;
    }
};