前端学习笔记-2.6注册页面

基本的注册内容都有了，用户名，密码，手机号，邮箱等
验证规则一般，有需要可更改。
用表格写的，简单一些

css:一张背景图片
.divshow{background:url(“img/QQ图片20170605135702.jpg”);}

js:有些重复的地方(整一下进行封装可减少代码量)

        //创建验证码
        function createCode(){
            var code = Math.floor(Math.random()*9000+1000);
            var span = document.getElementById("codeSpan");
            span.innerHTML = code;
        }
        //校验验证码
        function checkCode(){
            //获取系统生成的验证码
            var code1 = document.getElementById("codeSpan").innerHTML;
            //获取用户输入的验证码
            var code2 = document.getElementById("code").value;
            //获取span
            var span = document.getElementById("code2Span");
            //创建校验规则
            if(code2=="" ||code2==null){
                span.innerHTML = "验证码不能为空";
                span.style.color = "red";
                return false;
            }else if(code1==code2){
                span.innerHTML = "验证码正确";
                span.style.color = "green";
                return true;
            }else{
                span.innerHTML = "验证码错误";
                span.style.color = "red";
                return false;
            }
        }
        //验证用户名
        function checkUname(){
            //获取用户的用户名信息
            var uname = document.getElementById("uname").value;
            //创建校验规则
            var reg = /^[\u4e00-\u9fa5]{2,4}$/;
            //获取span对象
            var span = document.getElementById("unameSpan");
            //开始校验
            if(uname=="" ||uname==null){
                //先检查是否为空
                span.innerHTML = "用户名不能为空";
                span.style.color = "red";
                return false;
            }else if(reg.test(uname)){
                //根据条件检验，输出校验结果
                span.innerHTML = "用户名ok";
                span.style.color = "green";
                return true;
            }else{
                span.innerHTML = "用户名不符合规则";
                span.style.color = "red";
                return false;
            }
        }
        //验证密码
        function checkPwd(){
            //获取用户的密码
            var pwd = document.getElementById("pwd").value;
            //获取校验规则
            var reg = /^[a-z]\w{5,7}$/;
            //获取span对象
            var span = document.getElementById("pwdSpan");
            //开始校验
            if(pwd=="" ||pwd==null){
                //输出校验结果
                span.innerHTML = "密码不能为空";
                span.style.color = "red";
                return false;
            }else if(reg.test(pwd)){
                span.innerHTML = "密码ok";
                span.style.color = "green";
                return true;
            }else {
                span.innerHTML = "密码格式不正确";
                span.style.color = "red";
                return false;
            }
            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(pwd2==pwd){
                span.innerHTML = "密码ok";
                span.style.color = "green";
                return true;
            }else{
                span.innerHTML = "密码格式不正确";
                span.style.color = "red";
                return false;
            }
        }
        //校验手机号
            function checkPhone(){
                return checkField("phone",/^1[3,4,5,7,8]\d{9}$/);
            }
            //校验邮箱
            function checkMail(){
                return checkField("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/);
            }
            //校验籍贯
            function checkAddress(){
                //获取用户选择的数据
                var sel = document.getElementById("address").value;
                //获取span
                var span = document.getElementById("addressSpan");
                //校验
                if(sel!=0){
                    span.innerHTML = "籍贯选择成功";
                    span.style.color = "green";
                }else{
                    span.innerHTML = "籍贯不能为请选择";
                    span.style.color = "red";
                }
            }
            //检验爱好
            function checkFav(){
                //获取所有的爱好
                var favs = document.getElementsByName("fav");
                //获取span
                var span = document.getElementById("favSpan");
                //遍历
                for(var i=0;i<favs.length;i++){
                    if(favs[i].checked){
                        span.innerHTML = "爱好选择成功";
                        span.style.color = "green";
                        return ;
                    }
                }
                span.innerHTML = "爱好至少选择一项";
                span.style.color = "red";
            }
            //校验自我介绍
            function checkIntro(){
                //获取对象
                var intro = document.getElementById("intro").value;
                //设立校验规则
                var reg = /^[a-zA-Z\u4e00-\u9fa5]{10,30}$/;
                //获取span
                var span = document.getElementById("introSpan");
                //设立校验规则
                if(intro=="" ||intro==null){
                    span.innerHTML = "个人介绍不能为空";
                    span.style.color = "red";
                    return false;
                }else if(reg.test(intro)){
                    span.innerHTML = "个人介绍ok";
                    span.style.color = "green";
                    return true;
                }else{
                    span.innerHTML = "个人介绍格式不正确";
                    span.style.color = "red";
                    return false;
                }
            }
            //校验协议
            function checkAgree(){
                document.getElementById("sub").disabled=!document.getElementById("agree").checked;
            }
            //校验提交
            function checkSub(){
                checkUname();
                checkPwd();
                checkPwd2();
                checkMail();
                checkPhone();
                checkFav();
                checkAddress();
                checkCode();
                checkIntro();
                return checkUname()&&checkPwd()&&checkPwd2()&&checkMail()&&checkPhone()&&checkFav()&&checkAddress()&&checkCode()&&checkIntro();
            }
/*-----------------------------------------------------------------------------------------------*/
    //封装校验：相同的保留，不同的传参
        function checkField(id,reg) {
            //获取用户数据
            var inp = document.getElementById(id);
            var va = inp.value;
            var alt = inp.alt;
            //获取span对象
            var span = document.getElementById(id+"Span");
            //开始校验
            if(va=="" ||va==null){
                //输出校验结果
                span.innerHTML = alt+"不能为空";
                span.style.color = "red";
                return false;
            }else if(reg.test(va)){
                span.innerHTML = alt+"ok";
                span.style.color = "green";
                return true;
            }else{
                span.innerHTML = alt+"格式不正确";
                span.style.color = "red";
                return false;
            }
        }

html:

<body onload="createCode()">
<div class="divshow">
    <form action="#" method="get" onsubmit="return checkSub()">
        <table align="center">
            <tr>
                <td width="80px">用户名：</td>
                <td width="350px">
                    <input type="text" name="uname" id="uname" value="" alt="用户名" onblur="checkUname()"/>
                    <span id="unameSpan">2*4位汗字</span>
                </td>
            </tr>
            <tr>
                <td width="80px">密码：</td>
                <td width="350px">
                    <input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()"/>
                    <span id="pwdSpan">6*8字母加数字组合</span>
                </td>
            </tr>
            <tr>
                <td width="80px">确认密码：</td>
                <td width="350px">
                    <input type="password" name="pwd2" id="pwd2" value="" onblur="checkPwd2()"/>
                    <span id="pwd2Span"></span>
                </td>
            </tr>
            <tr>
                <td width="80px">手机号：</td>
                <td width="350px">
                    <input type="text" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()"/>
                    <span id="phoneSpan"></span>
                </td>
            </tr>
            <tr>
                <td width="80px">邮箱：</td>
                <td width="350px">
                    <input type="text" name="mail" id="mail" value="" alt="邮箱" placeholder="请输入邮箱" onblur="checkMail()"/>
                    <span id="mailSpan"></span>
                </td>
            </tr>
            <tr>
                <td width="80px">性别：</td>
                <td>
                    男 <input type="radio" name="sex" id="sex" value="0" checked="checked"/>
                    女 <input type="radio" name="sex" id="sex" value="1" />
                </td>
            </tr>
            <tr>
                <td width="80px">籍贯：</td>
                <td>
                    <select name="address" id="address" onchange="checkAddress()">
                        <option value="0">--请选择--</option>
                        <option value="1">北京</option>
                        <option value="2">宁夏</option>
                        <option value="3">天津</option>
                    </select>
                    <span id="addressSpan"></span>
                </td>
            </tr>
            <tr>
                <td>爱好：</td>
                <td>
                    <input type="checkbox" name="fav" value="1" onclick="checkFav()">睡觉
                    <input type="checkbox" name="fav" value="2" onclick="checkFav()">吃饭
                    <input type="checkbox" name="fav" value="3" onclick="checkFav()">打豆豆<br />
                    <input type="checkbox" name="fav" value="4" onclick="checkFav()">跑步
                    <input type="checkbox" name="fav" value="5" onclick="checkFav()">听歌
                    <input type="checkbox" name="fav" value="6" onclick="checkFav()">上网
                    <span id="favSpan"></span>
                </td>
            </tr>
            <tr>
                <td>个人介绍:</td>
                <td>
                    <textarea cols="40" rows="5" name="intro" id="intro" onblur="checkIntro()"></textarea>
                    <span id="introSpan"></span>
                </td>
            </tr>
            <tr>
                <td>验证码：</td>
                <td>
                    <input type="text" name="code" id="code" value="" style="width: 110px;" onblur="checkCode()"/>
                    <span id="codeSpan" onclick="createCode()" style="background-image: url(img/timg.gif);color:black;"></span>
                    <span id="code2Span"></span>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="checkbox" name="" id="agree" value="" onclick="checkAgree()">是否同意本公司协议
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" name="" id="sub" value="立即注册" disabled="disabled" />
                </td>
            </tr>
        </table>
    </form>
</div>
</body>

注册算是功能性代码，前段需要掌握，只是光前端，没有与后台交互