用户注册页的布局及js逻辑实现（正则，注册按钮）

文章地址：https://www.cnblogs.com/sandraryan/

先写一个简单的静态页面，然后对用户输入的内容进行验证，判断输入的值是否符合规则，符合规则进行注册

先上静态页面

<div class="m-wrap">
        <div class="m-register">
            <p class="m-logn-title">
                首页<span>&nbsp;></span>我的账户
            </p>
            <div class="m-register-top">
                <h1>我是已注册用户，前往<a class="m-turnto-logn" href="logn.html" target="_blank">登录</a></h1>
                <div class="m-other-outer">
                    <p>使用合作网站账号登陆</p>
                    <div class="m-other-inner">
                        <div class="m-other-list m-other-list1">
                            <div class="m-list-bg m-list-bg1"><img src="" alt=""></div>
                            <p>微信</p>
                        </div>
                        <div class="m-other-list m-other-list2">
                            <div class="m-list-bg m-list-bg2"><img src="" alt=""></div>
                            <p>qq</p>
                        </div>
                        <div class="m-other-list m-other-list3">
                            <div class="m-list-bg m-list-bg3"><img src="" alt=""></div>
                            <p>新浪</p>
                        </div>
                        <div class="m-other-list m-other-list4">
                            <div class="m-list-bg m-list-bg4"><img src="" alt=""></div>
                            <p>支付宝</p>
                        </div>
                    </div>
                </div>

            </div>
            <hr>
            <div class="m-register-bottom">
                <h1>新用户注册</h1>
                <form action="" class="m-register-form">
                    <div class="m-reg-list m-reg-list1">
                        <p class="m-reg-name">称谓<span class="m-red">*</span></p>
                        <div class="m-reg-info1">
                            <input type="radio" name="sex" value="女" title="女">女
                            <input type="radio" name="sex" value="男" title="男">男
                        </div>
                    </div>
                    <br>
                    <div class="m-reg-list m-reg-list2">
                        <p>邮箱/手机
                            <span class="m-red">*</span>
                            <span class="m-tips1 m-red">请输入正确邮箱/手机号</span>
                        </p>
                        <div class="m-reg-info2">
                            <input type="text" placeholder="请输入有效的邮箱或手机号">
                        </div>
                    </div>
                    <div class="m-reg-list m-reg-list3">
                        <p>姓名<span class="m-red">*</span>
                        </p>
                        <div class="m-reg-info3">
                            <input type="text">
                        </div>
                    </div>
                    <div class="m-reg-list m-reg-list4">
                        <p>密码<span class="m-red">*</span>
                        <span class="m-tips2 m-red">密码必须在6位以上</span></p>
                        <div class="m-reg-info4">
                            <input type="password">
                        </div>

                    </div>
                    <div class="m-reg-list m-reg-list5">
                        <p>确认密码<span class="m-red">*</span>
                            <span class="m-tips3 m-red">两次密码不相同</span>
                        </p>
                        <div class="m-reg-info5">
                            <input type="password">
                        </div>
                    </div>
                    <div class="m-reg-list m-reg-list6">
                        <p>验证码(点击刷新)<span class="m-red">*</span>
                            <span class="m-tips4 .m-red">验证码输入错误</span>
                        </p>
                        <div class="m-reg-info6">
                            <input class="m-verify m-verify1" type="text">
                        </div>
                        <canvas id="canvas" width="100" height="43" onclick="dj()" style="border: 1px solid #ccc;
        border-radius: 5px;"></canvas>
                    </div>
                    <div class="m-reg-list m-reg-list6">
                        <p class="m-mess-p">短信验证码<span class="m-red">*</span></p>
                        <div class="m-reg-info3">
                            <input class="m-verify m-verify2" type="text" placeholder="随便写点吧...">
                        </div>
                        <a class="m-black-btn m-mess" href="javascript:;">获取短信验证码</a>
                    </div>
                </form>
                <p class="m-reg-policy">
                    <input type="checkbox" checked>
                    我同意依照本<a href="http://policy.lorealchina.com/termsofusewebsite">使用条款</a>和<a href="http://policy.lorealchina.com/privacypolicy">隐私政策</a>对我的个人信息进行收集和使用；我已阅读并确认被给予充分机会理解该使用条款和隐私政策的内容。
                </p>
                <a class="m-black-btn m-reg-submit" href="">同意协议并注册</a>
            </div>
        </div>
        <div class="m-register-aside">
            <div class="m-aside1">
                <h2>注册成为圣罗兰官网会员即可尊享</h2>
                <h3>获取最新商品信息</h3>
                <p>已注册邮箱将第一时间获取特价促销、
                    新品发布、礼盒套装及更多会员专享资讯。</p>
                <h3>订单历史记录</h3>
                <p>查看您的订单详情，及时了解物流配送状态。</p>
                <h3>生日礼遇</h3>
                <p>完善个人生日信息，生日当月发现惊喜，
                    届时请查看已注册邮箱。</p>
                <h3>快速购买通道</h3>
                <p>我们会在您的账户中保存历史账单和
                    配送信息，使您方便快捷地购物。<br>
                    <a class="m-private" href="private.html" target="_blank">(了解更多隐私政策)</a></p>
            </div>
            <div class="m-aside2">
                <h2>客户服务</h2>
                <p>如果有任何问题，请联系我们</p>
                <p class="m-tel"><i class="layui-icon layui-icon-cellphone" style="font-size: 20px; color: gray;"></i>
                    400-820-6362</p>
                <p>（周一至周日 9:00-21:00）</p>
                <p>联系客服下单 惊喜送礼</p>
            </div>
        </div>
    </div>

css样式

   <link rel="stylesheet" href="../public/layui/css/layui.css">
    <link rel="stylesheet" href="../css/btn.css">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .m-wrap {
            padding: 0 1%;
        }

        .m-logn-title {
            color: gray;
            font-size: 14px;
        }

        .m-register {
            margin-top: 30px;
            width: 72%;
            margin-right: 1%;
        }

        .m-register-aside {
            width: 25%;
        }

        .m-register,
        .m-register-aside {
            display: inline-block;
            vertical-align: top;
        }

        .m-register-top,
        .m-register-bottom {
            padding-left: 30px;
        }

        .m-register-top h1 {
            margin: 10px 0;
        }

        .m-register-top h1 a {
            text-decoration: underline;
        }

        .m-turnto-logn {
            color: black;
        }

        .m-other-outer {
            width: 40%;
        }

        .m-other-outer>p {
            display: inline-block;
            margin: 15px 0;
            font-size: 14px;
        }

        .m-other-inner {
            display: flex;
            font-size: 14px;
        }

        .m-other-inner>div {
            width: 15%;
        }

        .m-red {
            color: red;
        }

        /* 精灵图 */
        .m-list-bg {
            background: url('../sources/m-img/bg.png') no-repeat;
            width: 30px;
            height: 30px;
        }

        .m-list-bg1 {
            background-position: 30.5% 74%;
        }

        .m-list-bg2 {
            background-position: 96% -1%;
        }

        .m-list-bg3 {
            background-position: 20% 74.5%;
        }

        .m-list-bg4 {
            background-position: 7% 85%;
        }

        hr {
            color: gray;
        }


        /* aside */
        .m-aside1,
        .m-aside2 {
            text-align: center;
            background-color: #f2f2f2;
            padding: 10px 25px;
        }

        .m-register-aside {
            margin-top: 30px;
        }

        .m-aside1 {
            padding-bottom: 40px;
        }

        .m-aside2 {
            margin-top: 20px;
        }

        .m-register-aside h2 {
            font-weight: 600;
        }

        .m-register-aside h3 {
            font-weight: 500;
            margin: 15px 5px;
        }

        .m-private {
            text-decoration: underline;
            color: #999999;
        }

        .m-register-aside p {
            color: #999999;
        }

        .m-aside2 p {
            margin: 10px;
            color: black;
        }

        .m-aside2 .m-tel {
            font-weight: 600;
        }

        /* 注册表单部分 */
        .m-register-form {
            display: inline-flex;
            flex-wrap: wrap;
            /* 有多个主轴时候，主轴纵向对齐方式 */
            align-content: center;
        }
        
        .m-reg-name,.m-reg-info1 {
            display: inline-block;
        }
        .m-register-form>div {
            width: 48%;
        }
        .m-register-form input{
            width: 85%;
            height: 40px;
        }
        .m-register-form .m-reg-list p{
            margin: 10px 0;
        }
        .m-register-form .m-reg-list1{
            flex-basis: 100%;
        }
        .m-register-form input[type = 'radio']{
            width: 15px;
            height: 15px;
        }
        .m-register-bottom input[type='ckeckbox']{
            margin-top: 20px;
        }
        .m-reg-policy {
            margin-top: 20px;
            display: inline-block;
        }
        .m-reg-policy a {
            text-decoration: underline;
            font-weight: 600;
        }
        .m-black-btn {
            margin-top: 20px;
        }
        .m-reg-list .m-verify {
            width: 30%;
        }
        .m-reg-list5,.m-reg-list6 {
            position: relative;
        }
        .m-mess {
           position: absolute;
           top: 15px;
           left: 174px;
        }
        #canvas {
            position: absolute;
            top: 37px;
            left: 180px;
        }
        .m-tips1,.m-tips2,.m-tips3,.m-tips4{
        display: none;
        color: red;
        }
 
    </style>

这里引入了layui 和我自己写的一个统一的按钮样式

这是我自己封装的按钮样式的代码

/* ysl页面所有btn都是这个样式，封装引入，个别修改宽高 */
.m-black-btn {
    display: inline-block;
    width: 150px;
    height: 45px;
    color: #fff;
    background: #000;
    border: 1px solid #000;
    text-align: center;
    line-height: 45px;
    font-size: 14px;
}
.m-black-btn:hover{
    color: #000;
    background: #fff;
    border: 1px solid #000;
    transition: .5s;
}

最后，长成这个样子

对没错，就是仿写的ysl的注册页面

无利益相关（除非送我一套口红（ε=ε=ε=┏(゜ロ゜;)┛））

继续，js代码

先写出来验证码功能，这块的代码来自https://blog.csdn.net/qq_42463851/article/details/90755734

 <script>
        // 绘制验证码开始
        var show_num = [];
        draw(show_num);

        function dj() {
            draw(show_num);
        }

        // 绘制验证码的canvas
        function draw(show_num) {
            var canvas_width = document.getElementById('canvas').clientWidth;
            var canvas_height = document.getElementById('canvas').clientHeight;
            var canvas = document.getElementById("canvas"); //获取到canvas的对象，演员
            var context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
            canvas.width = canvas_width;
            canvas.height = canvas_height;
            var sCode =
                "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
            var aCode = sCode.split(",");
            var aLength = aCode.length; //获取到数组的长度

            for (var i = 0; i <= 3; i++) {
                var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
                var deg = Math.random() * 30 * Math.PI / 180; //产生0~30之间的随机弧度
                var txt = aCode[j]; //得到随机的一个内容
                show_num[i] = txt;
                var x = 10 + i * 20; //文字在canvas上的x坐标
                var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
                context.font = "bold 23px 微软雅黑";

                context.translate(x, y);
                context.rotate(deg);

                context.fillStyle = randomColor();
                context.fillText(txt, 0, 0);

                context.rotate(-deg);
                context.translate(-x, -y);
            }
            for (var i = 0; i <= 5; i++) { //验证码上显示线条
                context.strokeStyle = randomColor();
                context.beginPath();
                context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.stroke();
            }
            for (var i = 0; i <= 30; i++) { //验证码上显示小点
                context.strokeStyle = randomColor();
                context.beginPath();
                var x = Math.random() * canvas_width;
                var y = Math.random() * canvas_height;
                context.moveTo(x, y);
                context.lineTo(x + 1, y + 1);
                context.stroke();
            }
        }
        function randomColor() { //得到随机的颜色值
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }
    </script>

然后是我自己写的验证等部分

因为比较菜，写的可能有bug（但我还没发现）

 <script>
        let umain,uphone,umail,usex,uname,psw1,psw2;
        // 判断性别
        // 必须写在，change或者blur的事件中，否则获取的是初始值
        $('.m-reg-info1 input').change(function(){
            usex = $('.m-reg-info1 input[type="radio"]:checked').val();
        });
        //姓名判断
        $('.m-reg-info3 input').change(function(){
            uname =$('.m-reg-info3 input').val();
        });
        // 注册手机/邮箱验证
        $('.m-reg-info2 input').change(function(){
            umain= $('.m-reg-info2 input').val();
            // console.log(uphone);
                // 第一位是【1】开头，第二位则有【3,4,5,7,8】，第三位之后则是数字【0-9】
                let regPhone = new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/);
                // 长度不限，可以使用英文（包括大小写）、数字、点号、下划线、减号，首字母必须是字母或数字；
                let regEmail = new RegExp("^[a-z0-9A-Z]+[- |a-z0-9A-Z._]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$");
                // 如果输入的内容通过了验证
                if ((regPhone.test(umain))||(regEmail.test(umain))){
                    console.log('输入成功');
                    let regemail = /\@/g;
                    // 判断输入中是否含有@，如果有输入的是邮箱，没有是电话号。
                    if(regemail.test(umain)){
                        //会输出邮箱
                        umail = $('.m-reg-info2 input').val();
                        uphone ='';
                        // console.log(umail,uphone);
                    }else{
                        uphone =  $('.m-reg-info2 input').val();
                        umail = '';
                        // 会输出电话号
                        // console.log(umail,uphone);
                    }
                    // 输入ok还得让它消失。。
                    $('.m-tips1').css('display','none');
                }else{
                    $('.m-tips1').css('display','inline');
                    // 点击注册按钮是不进行跳转
                    $(".m-reg-submit").removeAttr("href");
                    $('.m-reg-info2 input').val('');
                    // 实在不知道要怎么吧正则验证和空值验证串在一起，就每一行无法通过正则的时候清空表单内容
                    //然后只要单行不通过就无法提交表单 机智如我
                    //菜的人总有自己的办法。。。。
                    return false;
                }
        });

        // psw1 要在验证密码的时候用到，所以要是全局变量
        //密码最少六位 在第一次输入密码框验证 6位ok 不够6位组织代码提交
        $('.m-reg-info4 input').change(function(){
            psw1 = $('.m-reg-info4 input').val();
            if(psw1.length<6){
                $('.m-tips2').css('display','inline');
                $(".m-reg-submit").removeAttr("href");
                return false;
            }else{
                $('.m-tips2').css('display','none');
            }
        });
        // 两次密码相同验证 在确认密码框验证
        $('.m-reg-info5 input').change(function(){
            psw2 = $('.m-reg-info5 input').val();
            if(psw1 === psw2){
                $('.m-tips3').css('display','none');
            }else{
                $('.m-tips3').css('display','inline');
                return false;
            }
        });

        // 验证码输入是否正确
        $('.m-reg-info6 input').change(function(){
            let num = show_num.join("");
            let verify = $('.m-reg-info6 input').val();
            if(verify == num){
                $('.m-tips4').css('display','none');
            }else{
                $('.m-tips4').css('display','inline');
                $(".m-reg-submit").removeAttr("href");
            }
        });
        usex = $('.m-reg-info1 input').val();
        uname = $('.m-reg-info3 input').val();
        // 如果所有正则通过且内容都不不为空，提交按钮可用并提交信息
        $('.m-reg-submit').click(function(){
            //不考虑内容，只判断值是否存在
            let a = $('.m-reg-info1 input').val();
            let b = $('.m-reg-info2 input').val();
            let c = $('.m-reg-info3 input').val();
            let d = $('.m-reg-info4 input').val();
            let e = $('.m-reg-info5 input').val();
            let f = $('.m-reg-info6 input').val();
            console.log(uname);
            console.log(usex,uphone,uname,umail,psw1);
            if(a != '' && b != '' && c != '' && d != '' && e != '' && f != ''){
                // 所有输入框都不是空的。
                // console.log('可以提交了');
                $.ajax({
                    type:'post',
                    url:'',
                    async:true,  //异步
                    // 前者为字段名，后者为数据
                    dataType: 'json',    // 这里是指希望服务端返回json格式的数据
                    data:{
                        type:'register',
                        uname,
                        uphone,
                        usex,
                        psw1
                    },
                    // 成功后的回调
                    success(res){
                        console.log(res);
                    },
                    error(error){
                        console.log('failure');
                    }

                });
            }
        });

    </script>

that' all

原创，转载请注明出处  https://www.cnblogs.com/sandraryan/