js表单验证是目前前端必不可少用到的检测方法，现在我就发一下我用到的常见的几种，例如，姓名验证，手机号验证，邮箱验证，用户名验证，密码验证，确认密码验证，用到了正则表达式,下面是一套完整的网页代码~

js代码：

window.onload = function(){
    //初始化这些方法  function init(){        truenameFocus();        truenameBlur();        phoneFocus();        phoneBlur();        emailFocus();        emailBlur();        qqFocus();        qqBlur();        usernameFocus();        usernameBlur();        pwFocus();        pwBlur();        surepwFocus();        surepwBlur();        checkForm(); canelPage();}//点击取消按钮就刷新 function canelPage(){
    var canel = document.getElementById("customer_canel"); canel.onclick = function(){
    　　　　window.location.reload;//刷新页面 } } //姓名验证    function truenameFocus() {        var truename = document.getElementById("input_truename");        var hinttruename = document.getElementById("hint_truename");        truename.onfocus = function () {            hinttruename.style.color = "#999999";            hinttruename.innerHTML = "请输入真实姓名~";        }    }    function truenameBlur() {        var truename = document.getElementById("input_truename");        var hinttruename = document.getElementById("hint_truename");        var reg = /^[\u0391-\uFFE5]+$/;//只能输入中文        truename.onblur = function () {            if (truename.value == "") {                hinttruename.innerHTML = "姓名不能为空";                hinttruename.style.color = "red";                return false;            }            if (reg.test(truename.value) == false) {                hinttruename.innerHTML = "请输入中文~";                hinttruename.style.color = "red";                return false;            }            hinttruename.innerHTML = "名字格式正确";            hinttruename.style.color = "green";            return true;        }    }    // 手机号验证    function phoneFocus() {        var phone = document.getElementById("input_phone");        var hintphone = document.getElementById("hint_phone");        phone.onfocus = function () {            hintphone.innerHTML = "请输入11位正确的手机号码~";            hintphone.style.color = "#999999";        }    }    function phoneBlur() {        var phone = document.getElementById("input_phone");        var hintphone = document.getElementById("hint_phone");        var reg = /^[0-9]+$/;//只能输入数字        phone.onblur = function () {            if (phone.value == "") {                hintphone.innerHTML = "手机号码不能为空~";                hintphone.style.color = "red";                return false;            }            if (phone.value.substring(0, 1) !== "1" || reg.test(phone.value) == false) {                hintphone.innerHTML = "请输入正确的手机号~";                hintphone.style.color = "red";                return false;            }            if (phone.value.length > 11 || phone.value.length < 11) {                hintphone.innerHTML = "手机号码应是11位~~";                hintphone.style.color = "red";                return false;            }            hintphone.innerHTML = "手机号通过~";            hintphone.style.color = "green";            return true;        }    }    //邮箱验证    function emailFocus() {        var email = document.getElementById("input_email");        var hintemail = document.getElementById("hint_email");        email.onfocus = function () {            hintemail.innerHTML = "请输入您的常用邮箱~";            hintemail.style.color = "#999999";        }    }    function emailBlur() {        var email = document.getElementById("input_email");        var hintemail = document.getElementById("hint_email");        var reg = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;//邮箱格式的检测        email.onblur = function () {            if (email.value == "") {                hintemail.innerHTML = "邮箱不能为空~";                hintemail.style.color = "red";                return false;            }            if (reg.test(email.value) == false) {                hintemail.innerHTML = "邮箱的格式不正确~";                hintemail.style.color = "red";                return false;            }            hintemail.innerHTML = "邮箱格式正确,验证通过~";            hintemail.style.color = "green";            return true;        }    }    //qq验证    function qqFocus() {        var qq = document.getElementById("input_qq");        var hintqq = document.getElementById("hint_qq");        qq.onfocus = function () {            hintqq.innerHTML = "请输入您的QQ号~";            hintqq.style.color = "#999999";        }    }    function qqBlur() {        var qq = document.getElementById("input_qq");        var hintqq = document.getElementById("hint_qq");        // var regu = /^[1][0-9][0-9]{9}$/;//检测手机号码的表达式，以1开头        // var reg = new RegExp(regu);        var reg = /^\d+$/;//只能是数字        qq.onblur = function () {            if (qq.value == "") {                hintqq.innerHTML = "QQ号不能为空~";                hintqq.style.color = "red";                return false;            }            if (reg.test(qq.value) == false) {                hintqq.innerHTML = "请输入正确的QQ号~";                hintqq.style.color = "red";                return false;            }            hintqq.innerHTML = "QQ通过~";            hintqq.style.color = "green";            return true;        }    }    //昵称验证    function usernameFocus() {        var username = document.getElementById("input_username");        var hintusername = document.getElementById("hint_username");        username.onfocus = function () {            hintusername.innerHTML = "由汉字、字母、数字、下划线组成~";            hintusername.style.color = "#999999";        }    }    function usernameBlur() {        var username = document.getElementById("input_username");        var hintusername = document.getElementById("hint_username");        //由数字，字母，或下划线组成的字符串        var regu = "^[0-9a-zA-Z\_]+$";        var reg = new RegExp(regu);        var chinaReg = /[\u4e00-\u9fa5]/g;   //匹配中文字符        username.onblur = function () {            if (username.value == "") {                hintusername.innerHTML = "昵称不能为空";                hintusername.style.color = "red";                return false;            }            if (reg.test(username.value) == false && chinaReg.test(username.value) == false) {                hintusername.innerHTML = "只能由汉字、字母、数字、下划线组成";                hintusername.style.color = "red";                return false;            }            var len = username.value.replace(chinaReg, "ab").length;            if (len > 20 || len < 4) {                hintusername.innerHTML = "长度为4－20个字符";                hintusername.style.color = "red";                return false;            }            hintusername.innerHTML = "昵称输入正确";            hintusername.style.color = "green";            return true;        }    }    //密码验证    function pwFocus() {        var pw = document.getElementById("input_pw");        var hintpw = document.getElementById("hint_pw");        pw.onfocus = function () {            hintpw.innerHTML = "密码长度6~16个字符";            hintpw.style.color = "#999999";        }    }    function pwBlur() {        var pw = document.getElementById("input_pw");        var hintpw = document.getElementById("hint_pw");        pw.onblur = function () {            if (pw.value == "") {                hintpw.innerHTML = "密码不能为空,请输入6~16位密码~";                hintpw.style.color = "red";                return false;            }            if (pw.value.length > 16 || pw.value.length < 6) {                hintpw.innerHTML = "密码长度为6~16位";                hintpw.style.color = "red";                return false;            }            hintpw.innerHTML = "密码格式输入正确~";            hintpw.style.color = "green";            return true;        }    }    //确认密码验证    function surepwFocus() {        var surepw = document.getElementById("input_surepw");        var hintsurepw = document.getElementById("hint_surepw");        surepw.onfocus = function () {            hintsurepw.innerHTML = "密码长度6~16个字符";            hintsurepw.style.color = "#999999";        }    }    function surepwBlur() {        var surepw = document.getElementById("input_surepw");        var pw = document.getElementById("input_pw");        var hintsurepw = document.getElementById("hint_surepw");        surepw.onblur = function () {            if (surepw.value == "") {                hintsurepw.innerHTML = "确认密码不能为空,请输入6~16位密码~";                hintsurepw.style.color = "red";                return false;            }            if (surepw.value != pw.value) {                hintsurepw.innerHTML = "两次输入的密码不一致,请重新输入~";                hintsurepw.style.color = "red";                return false;            }            hintsurepw.innerHTML = "两次密码输入正确~";            hintsurepw.style.color = "green";            return true;        }    }//表单提交的时候验证表单内容输入的有效性    function checkForm() {        var flagtruename = truenameBlur();        var flagphoneblur = phoneBlur();        var flagemail = emailBlur();        var flagusername = usernameBlur();        var flagpw = pwBlur();        var flagsurepw = surepwBlur();        var btn_sure = document.getElementById("customer_surebtn");        btn_sure.onclick = function () {            if (flagtruename == true && flagphoneblur == true && flagemail == true && flagusername == true && flagpw == true && flagsurepw == true) {                return true;            } else {                return false;            }        }    }init();  }

 

css代码:

.customeradd_box{    width: 800px;    height: 500px;    border: 1px solid #C7C9CA;    position:fixed;    top: 20%;    left: 20%;    text-align: center;     font-weight: 400;    font-family:"微软雅黑";    font-size:20px;    color: #187EC4;    display: none;    background-color: #ffffff;    z-index: 999;}.customeradd_title{    width: 800px;    height: 70px;    line-height: 60px;    } .customeradd_left{    width: 350px;    text-align: center;    float: left;    margin-left: 48px;    border-right: 1px dashed #C7C9CA;}.customeradd_left li,.customeradd_right li{    width:340px;    height: 55px;    line-height: 50px;}.twoul li{    float: left;    width: 120px;}.customeradd_left input,.customeradd_right input{    width: 200px;    height: 35px;    font-size: 15px;    border-radius: 3px;    border: 1px solid #C7C9CA;}.customeradd_left select,.customeradd_right select{    width: 200px;    height: 35px;    font-size: 15px;    border-radius: 3px;}.customeradd_right{    width: 350px;    text-align: center;    float: right;    margin-right: 48px;    }.customer_bottom{    width: 340px;    height:60px;    text-align: center;    line-height: 60px;    position: relative;    bottom: 5px;    left: 220px;}button{    width: 68px;    height: 40px;    background-color:#00A1E7;    color: #ffffff;    font-size: 17px;    border: none;    margin: 20px;    cursor: pointer;}button:focus{    outline: none;}button:hover{    background-color: #0986BC;}

 

 

 

html:

 

    
             
         
     
     
     
    
      
        
       添加客服    
      
          
      
        
               
       
            
        
                
         
          
          
基本信息
         
            
            
        
                
         
          
姓名
          
         
            
            
        
请输入您的真实姓名
            
        
                
         
          
性别
          
男女
         
            
            
        
            
        
                
         
          
手机号
          
         
            
            
        
请输入你的11位真实手机号~
            
        
                
         
          
邮箱
          
         
            
            
        
请输入您的QQ邮箱~
            
        
                
         
          
QQ
          
         
            
            
        
请输入您的QQ~
        
       
    
      
    
      
        
               
       
            
        
                
         
          
          
其他信息
         
            
            
        
                
         
          
昵称
          
         
            
            
        
包含汉字、字母、数字、下划线
            
        
                
         
          
工号
          
         
            
            
        
            
        
                
         
          
密码
          
         
            
            
        
6~18个字符，可使用字母、数字、下划线
            
        
                
         
          
确认密码
          
         
            
            
        
            
        
                
         
          
服务类别
          
 维修类 造船类 救助类 法律类 技术类 订单类 
                    
          
            
         
            
        
       
    
      
    
      
    
      
        
       确认        
       取消