?一、前言

欧克欧克，完事了总结一下模仿的超级烂但是里面知识点是javascript中比较经典的了因为这些功能截止到现在大都相同剩下的就是细节优化界面美化了看图

1.1、表单提交的效果图

1.2、表单校验信息提示效果图

?二、主要代码

2.1、<style>部分

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

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

        .rg_layout {
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*让div水平居中*/
            margin: auto;
        }

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

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

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

        }


        .rg_center {
            float: left;
            /* 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, #phone, #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;
            background-color: #FFD026;
            border: 1px solid #FFD026;
        }

        #cen_sub {
            padding-left: 150px;
        }

        #chck {
            color: #A6A6A6;
            padding-left: 150px;
            padding-top: 20px;
        }

        /*提示成功显示*/
        .error {
            color: red;
        }
        span{
            margin-left: 100px;
        }

        .correct {
            display: inline-block;
            width: 10px;
            height: 3px;
            background: #008100;
            line-height: 0;
            font-size: 0;
            vertical-align: middle;
            -webkit-transform: rotate(45deg);
        }

        .correct:after {
            content: '/';
            display: block;
            width: 20px;
            height: 3px;
            background: #008100;
            -webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);
        }

        #img_static{
            width: 20px;height: 15px;
        }
    </style>

2.2、<script>部分

 <script>
        window.onload = function () {
            //绑定onsubmit事件
            document.getElementById("form").onsubmit = function () {
                //用户校验
                //密码校验
                //邮箱校验
                //姓名校验
                //手机号校验
                //出生日期校验
                //验证码校验
                //服务条款校验
                img_static();




                return checkUsername() && checkPassword() && checkEamil() && checkName() && checkPhone() && checkBirthday() && checkbox();

            }
            //给用户名和密码框分别绑定离焦事件
            document.getElementById("username").onmouseout = checkUsername;
            document.getElementById("password").onmouseout = checkPassword;
            document.getElementById("email").onmouseout = checkEamil;
            document.getElementById("name").onmouseout = checkName;
            document.getElementById("phone").onmouseout = checkPhone;
            document.getElementById("birthday").onmouseout = checkBirthday;
            document.getElementById("img_static").onmouseup = img_static;
            document.getElementById("btn_sub").onmouseup = checkbox;

        }
        //用户校验
        function checkUsername() {
            //获取值
            var username = document.getElementById("username").value;
            //定义正则
            var reg_username = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;//帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)
            //校验正则
            var flag = reg_username.test(username);
            //提示信息
            var s_username = document.getElementById("s_username");

            if (flag) {
                //true
                // s_username.innerHTML = "<span class='correct'></span>";
                s_username.innerHTML = "<img src='img/ok_green.png' style='height: 25px;margin-right: 50px;'></img>";
            } else {

                s_username.innerHTML = "<img src='img/no.png' style='height: 25px;margin-right: 50px;'>账户错误</img>";
                // s_password.innerHTML = "字母开头";

            }
            return flag;
        }
        //密码校验
        function checkPassword() {
            //获取值
            var password = document.getElementById("password").value;
            //定义正则
            var reg_password = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$/;//强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)
            //校验正则
            var flag = reg_password.test(password);
            //提示信息
            var s_password = document.getElementById("s_password");

            if (flag) {
                //true
                // s_username.innerHTML = "<span class='correct'></span>";
                s_password.innerHTML = "<img src='img/ok_green.png' style='height: 25px;margin-right: 50px;'></img>";
            } else {
                s_password.innerHTML = "<img src='img/no.png' style='height: 25px;margin-right: 50px;'>密码错误</img>";
                // s_password.innerHTML = "包含大小写字母和数字";
            }
            return flag;
        }

        //邮箱校验
        function checkEamil() {

            var email = document.getElementById("email").value;

            var reg_email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//邮箱校验

            var flag = reg_email.test(email);

            var s_email = document.getElementById("s_email");

            if (flag) {
                s_email.innerHTML = "<img src='img/ok_green.png' style='height: 25px;margin-right: 50px;'></img>";
            } else {
                s_email.innerHTML = "<img src='img/no.png' style='height: 25px;margin-right: 50px;'>邮箱错误</img>";

            }
            return flag;
        }

        //姓名校验
        function checkName() {

            var name = document.getElementById("name").value;

            var reg_name = /^[\u4e00-\u9fa5]{2,6}$/;//汉字

            var flag = reg_name.test(name);

            var s_name = document.getElementById("s_name");

            if (flag) {
                s_name.innerHTML = "<img src='img/ok_green.png' style='height: 25px;margin-right: 50px;'></img>";
            } else {
                s_name.innerHTML = "<img src='img/no.png' style='height: 25px;margin-right: 50px;'>姓名错误</img>";

            }
            return flag;
        }

        //手机号校验
        function checkPhone() {

            var phone = document.getElementById("phone").value;

            var reg_phone = /^(13[0-9]|17[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;//手机号

            var flag = reg_phone.test(phone);

            var s_phone = document.getElementById("s_phone");

            if (flag) {
                s_phone.innerHTML = "<img src='img/ok_green.png' style='height: 25px;margin-right: 50px;'></img>";
            } else {
                s_phone.innerHTML = "<img src='img/no.png' style='height: 25px;margin-right: 50px;'>手机号错误</img>";

            }
            return flag;
        }
        //出生日期校验
        function checkBirthday() {

            var birthday = document.getElementById("birthday").value;

            var reg_birthday = /^((?:19[2-9]\d{1})|(?:20(?:(?:0[0-9])|(?:1[0-8])|(?:2[0-8]))))\-((?:0?[1-9])|(?:1[0-2]))\-((?:0?[1-9])|(?:[1-2][0-9])|30|31)$/;// 更加高级的可以说根据时间变化 动态获取年满18岁的出生日期正则
            //参考文章https://www.jb51.net/article/136913.htm

            var flag = reg_birthday.test(birthday);

            var s_birthday = document.getElementById("s_birthday");

            if (flag) {
                s_birthday.innerHTML = "<img src='img/ok_green.png' style='height: 25px;margin-right: 50px;'></img>";
            } else {
                s_birthday.innerHTML = "<img src='img/no.png' style='height: 25px;margin-right: 50px;'>出生日期错误</img>";

            }
            return flag;
        }

        //用户协议校验
        var flag = false;
        function img_static() {
            var img = document.getElementById("img_static");
            var xieyi = document.getElementById("xieyi");
               if (flag){
                   img.src = "https://qq-web.cdn-go.cn/zc.qq.com/9315f3d4/v3/img/up.png";
                   xieyi.style.display = 'none';
                   flag = false;
               }else{
                   img.src = "https://qq-web.cdn-go.cn/zc.qq.com/9315f3d4/v3/img/down.png";
                   xieyi.style.display = 'inline';
                   flag = true;
           }
        }
        //多选框校验
         function checkbox() {
             var cb = document.getElementsByName("cb");
             var length = cb.length;
             // alert(length)
             for (let i = 0; i < cb.length; i++) {

                if (cb[i].checked == true){
                    alert("提交表单成功")
                    return true
                }else{
                    alert("请先进行协议同意")
                    return false;
                }


             }




        }



    </script>