今日总结：使用js校验用户名输入格式等

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
</head>
<style type="text/css">

    form{
        width:700px;
        height:500px;
        position:absolute;
        left:50%;
        top:50%;
        margin-left: -200px;
        margin-top: -250px;
    }
    span{
        font-weight: bold;
        color:#ff9955;
    }

</style>
<body>

        <form class="label" action="" method="post">
            <table>
                <tr><td>用户名:</td><td><input type="text" name="username" id="uname" onblur="checkUname()"><span id="unameSpan">(必填，3-15字符长度，支持汉字、字母、数字及_)</span></td></tr>
                <tr><td>密码:</td><td><input type="text" name="password" id="pwd" onblur="checkPwd()"><span id="pwdSpan" >(必填，不得少于6位)</span></td></tr>
                <tr><td>重复密码 :</td><td><input type="text" name="reusername" id="pwd2" onblur="checkPwd2()"><span id="pwd2Span" ></span></td></tr>
                <tr><td>电子邮箱 :</td><td><input type="text" name="email"><span>(必填)</span></td></tr>
                <tr><td><input type="submit" value="提交注册" onsubmit="return checkSub()"></td><td><a href="rlogin.php"><input type="button" value="返回" ></a></input></td></tr>
            </table>
        </form>
        <script type="text/javascript">

            function checkUname(){
                //获取用户获得用户名信息
                var uname=document.getElementById("uname").value;
                //创建校验规则,用户名2-4个
                var reg=/^[\u4e00-\u9fa5|\w+]{3,15}$/
                //获取span对象
                var unameSpan=document.getElementById("unameSpan");
                //开始交验
                if(unameSpan==""||unameSpan==null){
                    //输入校验结果
                    unameSpan.innerHTML="*用户名不能为空";
                    unameSpan.style.color="red";
                    return false;
                }else if(reg.test(uname)){
                    //输入校验结果
                    unameSpan.innerHTML="*用户名通过";
                    unameSpan.style.color="green";
                    return true;
                }else{
                    //输入校验结果
                    unameSpan.innerHTML="*用户名格式不符"
                    unameSpan.style.color="red";
                    return false;
                }

            }
            //验证密码
            function checkPwd(){
                //获取用户获得用户名信息
                var upwd=document.getElementById("pwd").value;
                //创建校验规则,密码要求6-8位，首位为字母，后面5-7位是数字
                var reg=/^\S{6,}$/;
                //获取span对象
                var span=document.getElementById("pwdSpan");
                //开始交验
                if(span==""||span==null){
                    //输入校验结果
                    span.innerHTML="*密码不能为空";
                    span.style.color="red";
                    return false;
                }else if(reg.test(upwd)){
                    //输入校验结果
                    span.innerHTML="*密码通过";
                    span.style.color="green";
                    return true;
                }else{
                    //输入校验结果
                    span.innerHTML="*密码格式不符"
                    span.style.color="red";
                    return false;
                }
                //第一次密码为a123456，第二次密码为a1234567，则修改的第一次密码，确认密码也会重新校验
                checkPwd2();
            }
            function checkPwd2(){
                //获取第一次校验密码
                var pwd=document.getElementById("pwd").value;
                //获取确认密码
                var pwd2=document.getElementById("pwd2").value;
                //获取span对象
                var span=document.getElementById("pwd2Span");
                //比较前两次密码是否相同
                if( pwd2==""|| pwd2==null){
                    //输入校验结果
                    span.innerHTML="*密码不能为空";
                    span.style.color="red";
                    return false;
                }else if(pwd===pwd2){
                    //输入校验结果
                    span.innerHTML="*密码通过";
                    span.style.color="green";
                    return true;
                }else{
                    //输入校验结果
                    span.innerHTML="*密码不同，请重新输入"
                    span.style.color="red";
                    return false;
                }
            }
            function checkSub(){
                checkUname();
                checkPwd();
                checkPwd2();
                /*checkmail();
                checkPhone();
                checkFav();
                checkAddress();
                checkCode();*/
                return checkUname()&&checkPwd()&&checkPwd2();
            }

        </script>
</body>
</html>