CSS(四)_注册页面样式设计

效果图：

外部CSS文件：

.cont{
    margin: 50px auto;
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    background: url("../img1/register_bg.png") no-repeat center;
    padding-top: 25px;
}

.rg_layout {
    width: 900px;
    height: 500px;
    border-radius:4px;
    background:url("../img1/bg.jpg");
    /*让div水平居中*/
    margin: auto;
}

.rg_left {
    /*border: 1px solid red;*/
    float: left;
    margin-left: 25px;
    margin-top: 25px;
}

.rg_left > p:first-child {
    color: #FFD026;
    font-size: 20px;
}

.rg_left > p:last-child {
    color: #A6A6A6;
    font-size: 20px;

}

.rg_center {
    float: left;
    margin-top: 30px;
    /* border: 1px solid red;*/

}

.rg_right {
    /*border: 1px solid red;*/
    float: right;
    margin: 15px;
}

.rg_right > p:first-child {
    font-size: 15px;

}

.rg_right p a {
    color: pink;
}

.td_left {
    width: 100px;
    text-align: right;
    height: 45px;
}

.td_right {
    padding-left: 50px;
}

#username, #password, #email, #name, #tel, #birthday, #checkcode {
    width: 251px;
    height: 32px;
    border: 1px solid #A6A6A6;
    /*设置边框圆角*/
    border-radius: 5px;
    padding-left: 10px;
}

#checkcode {
    width: 110px;
}

#img_check {
    height: 32px;
    vertical-align: middle;
}

#btn_sub {
    width: 150px;
    height: 40px;
    border-radius: 4px;
    margin-top: 10px;
    background-color: #FFD026;
    border: 1px solid #FFD026;
}

#td_sub{
    padding-left: 150px;
}

.error{
    color:red;
    vertical-align: middle;
    font-size: 1px;
}

 外部js：

window.onload=function () {
    // 1.给表单绑定onsubmit事件
    document.getElementById("form").onsubmit=function () {
        //调用用户名校验方法  checkUsername（）
        //return checkUsername() &&checkPassword();
        //调用密码校验方法  checkPassword（）
        return checkUsername() && checkPassword() && checkEmail() &&checkTel() && checkCheckcode();
    }
    //添加失去焦点事件
    document.getElementById("username").onblur=checkUsername;
    document.getElementById("password").onblur=checkPassword;
    document.getElementById("email").onblur=checkEmail;
    document.getElementById("tel").onblur=checkTel;
    document.getElementById("checkcode").onblur=checkCheckcode;
}

//校验用户名
function checkPassword() {
    //1.获取用户名的值
    var password = document.getElementById('password').value;

    //2.定义正则表达式
    var reg_password=/^\w{6,12}$/;
    //3.判断值是否符合正则的规则
    var flag = reg_password.test(password);
    //4.提示信息
    var s_password = document.getElementById("s_password");


    if (flag){
        //提示红色对勾
        s_password.innerHTML="<img width='35' height='25' src='img1/gou.png'/>";
    }else{
        //提示红色用户名有误
        s_password.innerHTML="6-12位的英文和数字的组合";
    }


    return flag;

}

//校验密码
function checkUsername() {
    //1.获取密码的值
    var username = document.getElementById("username").value;

    //2.定义正则表达式
    var reg_username=/^\w{6,12}$/;
    //3.判断值是否符合正则的规则
    var flag = reg_username.test(username);
    //4.提示信息
    var s_username = document.getElementById("s_username");


    if (flag){
        //提示红色对勾
        s_username.innerHTML="<img width='35' height='25' src='img1/gou.png'/>";
    }else{
        //提示红色用户名有误
        s_username.innerHTML="6-12位的英文和数字的组合";
    }
    return flag;

}

//校验邮箱
function checkEmail() {
    //1.获取邮箱的值
    var email = document.getElementById('email').value;

    //2.定义正则表达式
    var reg_email=/^\w+@[a-z0-9]+\.[a-z]{2,4}$/;
    //3.判断值是否符合正则的规则
    var flag = reg_email.test(email);
    //4.提示信息
    var s_email = document.getElementById("s_email");


    if (flag){
        //提示红色对勾
        s_email.innerHTML="<img width='35' height='25' src='img1/gou.png'/>";
    }else{
        //提示红色用户名有误
        s_email.innerHTML="请写正确的邮箱格式";
    }


    return flag;

}
//校验手机号
function checkTel() {
    //1.获取手机号的值
    var tel = document.getElementById('tel').value;

    //2.定义正则表达式
    var reg_tel=/^\w{11}$/;
    //3.判断值是否符合正则的规则
    var flag = reg_tel.test(tel);
    //4.提示信息
    var s_tel = document.getElementById("s_tel");


    if (flag){
        //提示红色对勾
        s_tel.innerHTML="<img width='35' height='25' src='img1/gou.png'/>";
    }else{
        //提示红色用户名有误
        s_tel.innerHTML="请输入正确的手机号码";
    }


    return flag;

}
//校验验证码
function checkCheckcode() {
    //1.获取验证码的值
    var checkcode = document.getElementById('checkcode').value;

    //2.定义正则表达式
    var reg_checkcode=/^\jgmxj$/;
    //3.判断值是否符合正则的规则
    var flag = reg_checkcode.test(checkcode);
    //4.提示信息
    var s_checkcode = document.getElementById("s_checkcode");


    if (flag){
        //提示红色对勾
        s_checkcode.innerHTML="<img width='35' height='25' src='img1/gou.png'/>";
    }else{
        //提示红色用户名有误
        s_checkcode.innerHTML="请输入正确的验证码";
    }


    return flag;

}

页面html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="案例6_css/注册页面_表单验证.css" />

<!--    <script type="text/javascript" src="js/jquery.min.js"></script>-->
    <script type="text/javascript" src="案例6_js/表单验证.js"></script>
</head>
<body>

<div class="rg_layout">
        <!--    页面左部分-->
            <div class="rg_left">
                <p>新用户注册</p>
                <p>USER REGISTER</p>

            </div>
        <!--页面中间部分-->
            <div class="rg_center">
                <div class="rg_form ">
                    <!--定义表单 form-->
                    <form action="https://www.baidu.com" id="form" method="get">
                        <table>
        <!--                    用户名-->
                            <tr>
                                <td class="td_left"><label for="username">用户名</label></td>
                                <td class="td_right">
                                    <input type="text" name="username" id="username" placeholder="请输入用户名">
                                    <span id="s_username" class="error"></span>
                                </td>

                            </tr>
        <!--                    密码-->

                            <tr>
                                <td class="td_left"><label for="password">密码</label></td>
                                <td class="td_right">
                                    <input type="password" name="password" id="password" placeholder="请输入密码">
                                    <span id="s_password" class="error"></span>
                                </td>
                            </tr>
        <!--email-->
                            <tr>
                                <td class="td_left"><label for="email">Email</label></td>
                                <td class="td_right">
                                    <input type="email" name="email" id="email" placeholder="请输入邮箱">
                                    <span id="s_email" class="error"></span>
                                </td>
                            </tr>
        <!--姓名-->
                            <tr>
                                <td class="td_left"><label for="name">姓名</label></td>
                                <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                            </tr>
        <!--手机号-->
                            <tr>
                                <td class="td_left"><label for="tel">手机号</label></td>
                                <td class="td_right">
                                    <input type="text" name="tel" id="tel" placeholder="请输入手机号">
                                    <span id="s_tel" class="error"></span>
                                </td>
                            </tr>
        <!--性别-->
                            <tr>
                                <td class="td_left"><label>性别</label></td>
                                <td class="td_right">
                                    <input type="radio" name="gender" value="male" checked> 男
                                    <input type="radio" name="gender" value="female"> 女
                                </td>
                            </tr>
        <!--出生日期-->
                            <tr>
                                <td class="td_left"><label for="birthday">出生日期</label></td>
                                <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">
                                </td>
                            </tr>
        <!--验证码-->
                            <tr>
                                <td class="td_left"><label for="checkcode">验证码</label></td>
                                <td class="td_right">
                                    <input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                                    <img id="img_check" src="img1/verify_code.jpg">
                                    <span id="s_checkcode" class="error"></span>
                                </td>
                            </tr>

        <!--注册按钮-->
                            <tr>
                                <td colspan="2"  id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
                            </tr>
                        </table>

                    </form>




    </div>
</div>
            <!--页面右部分-->
            <div class="rg_right">
        <p>已有账号?<a href="#">立即登录</a></p>
    </div>
    </div>

</body>
</html>