美文网首页程序员
仿360商城注册页面

仿360商城注册页面

作者: 希望9966 | 来源:发表于2018-12-01 16:10 被阅读0次

注册页面 获取焦点失去焦点时的表单验证 另外在教大家一个点击换验证码的效果

先看效果

111.jpg

首先引用css ，js文件

        <!-- 所需要的小文字图标 -->
        <link href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        
        <!-- 引用cdn jquery-->
        <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
        <script src="js/style.js"></script>

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>注册</title>
        <!-- 所需要的小文字图标 -->
        <link href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        
        <!-- 引用cdn jquery-->
        <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body style="background: #f5f5f5;">

        <div class="reg">
            <div class="reg_nav">
                <ul>
                    <li><a href="index.html" title="logo">
                            <span class="reg_logo"><img src="img/111.jpg"></span>
                        </a>
                        <span class="reg_title">
                            <a href="" title="注册帐号">注册帐号</a>
                        </span></li>
                    <li class="reg_login">
                        <a href="login.html" title="登录" target="_blank">登录</a>
                    </li>
                </ul>

            </div>

            <div class="reg_con">
                <form id="regform" method="post" action="">
                    <p class="fs-title">注册帐号</p>

                    <div class="register-box">
                        <label for="username" class="other_label">
                            <span><i class="fa fa-user-o fa-lg"></i></span>
                            <input id="phone" maxlength="20" type="text" placeholder="请输入要注册的手机号">
                        </label>
                        <div class="tips">

                        </div>
                    </div>
                    <div class="register-box">
                        <label for="username" class="other_label">
                            <span><i class="fa fa-unlock-alt fa-lg"></i></span>
                            <input maxlength="20" type="password" placeholder="密码请设置6-20个字符">
                        </label>
                        <div class="tips">

                        </div>
                    </div>
                    <div class="register-box">
                        <label for="username" class="other_label">
                            <span><i class="fa fa-unlock-alt fa-lg"></i></span>
                            <input maxlength="20" type="password" placeholder="请再次输入密码">
                        </label>
                        <div class="tips">

                        </div>
                    </div>
                    <div class="register-box">
                        <label for="username" class="other_label">
                            <input maxlength="20" type="text" placeholder="请输入验证码">
                        </label>
                        <span id="code"></span>
                        <div class="tips">

                        </div>
                    </div>
                    <div class="register-box">
                        <label for="username" class="other_label">
                            <input maxlength="20" type="text" placeholder="请输入短信验证码">
                        </label>
                        <span id="dxcode">发送验证码</span>
                        <div class="tips">

                        </div>
                    </div>

                    <div class="tips-wu"><a href="" target="_blank">短信验证码没收到？</a></div>

                    <div class="submit_btn">
                        <button type="submit" id="submit_btn">立 即 注 册</button>
                    </div>

                    <div class="arguement">
                        <input type="checkbox" id="xieyi">
                        阅读并同意
                        <a href="#">“用户协议”</a>和<a href="#">“用户隐私政策”</a>
                        <div class="tips">

                        </div>
                    </div>
                </form>
            </div>

            <div class="dibu">
                Copyright©2005-<span id="currentYear">2018</span> 希望9966 All Rights 简书
                <p><a href="#">京ICP证666666号[京ICP备8888888号-8]
                    </a></p>
                <p>
                    <a style="color:#999;" href="#">
                    京公网安备 9999999999999号</a>
                </p>
            </div>

        </div>
    </body>
</html>

重点来了 style.js

 $(function() {

    //聚焦失焦input
    $('input').eq(3).focus(function() {
        if ($(this).val().length == 0) {
            $(this).parent().next().next("div").text("看不清？点击图片更换验证码");
        }
    })
    //input各种判断
    //  手机号
    $('input').eq(0).blur(function() {
        var phone = document.getElementById('phone').value;
        if ($(this).val().length == 0) {
            $(this).parent().next("div").text("");
            $(this).parent().next("div").css("color", '#ccc');
        } else if (!(/^1(3|4|5|7|8)\d{9}$/.test(phone))) {
            $(this).parent().next("div").text("手机号格式不正确");
            $(this).parent().next("div").css("color", 'red');
        } else {
            $(this).parent().next("div").text("");
        }
    })
    //密码
    $('input').eq(1).blur(function() {
        if ($(this).val().length == 0) {
            $(this).parent().next("div").text("");
            $(this).parent().next("div").css("color", '#ccc');
        } else if ($(this).val().length > 0 && $(this).val().length < 6 && $(this).val().length > 20) {
            $(this).parent().next("div").text("长度只能在6-20个字符之间");
            $(this).parent().next("div").css("color", 'red');
        } else {
            $(this).parent().next("div").text("");
        }
    })
    //  确认密码
    $('input').eq(2).blur(function() {
        if ($(this).val().length == 0) {
            $(this).parent().next("div").text("");
            $(this).parent().next("div").css("color", '#ccc');
        } else if ($(this).val() != $('input').eq(1).val()) {
            $(this).parent().next("div").text("两次密码不匹配");
            $(this).parent().next("div").css("color", 'red');
        } else {
            $(this).parent().next("div").text("");
        }
    })

    //  验证码
    //   验证码刷新
    function code() {
        var str = "qwertyuiopasdfghjklzxcvbnm1234567890QWERTYUIOPLKJHGFDSAZXCVBNM";
        var str1 = 0;
        for (var i = 0; i < 4; i++) {
            str1 += str.charAt(Math.floor(Math.random() * 62))
        }
        str1 = str1.substring(1)
        $("#code").text(str1);
    }
    code();
    $("#code").click(code);
    //  验证码验证
    $('input').eq(3).blur(function() {
        if ($(this).val().length == 0) {
            $(this).parent().next().next("div").text("");
            $(this).parent().next().next("div").css("color", '#ccc');
        } else if ($(this).val().toUpperCase() != $("#code").text().toUpperCase()) {
            $(this).parent().next().next("div").text("验证码不正确");
            $(this).parent().next().next("div").css("color", 'red');
        } else {
            $(this).parent().next().next("div").text("");
        }
    })
    //  短信验证码验证
    $('input').eq(4).blur(function() {
        if ($(this).val().length == 0) {
            $(this).parent().next().next("div").text("");
            $(this).parent().next().next("div").css("color", '#ccc');
        } else if ($(this).val().length !== 6) {
            $(this).parent().next().next("div").text("请输入6位验证码");
            $(this).parent().next().next("div").css("color", 'red');
        } else {
            $(this).parent().next().next("div").text("");
        }
    })
    //  提交按钮
    $("#submit_btn").click(function(e) {
        for (var j = 0; j < 5; j++) {
            if ($('input').eq(j).val().length == 0) {
                $('input').eq(j).focus();
                if (j == 4) {
                    $('input').eq(j).parent().next().next("div").text("此处不能为空");
                    $('input').eq(j).parent().next().next("div").css("color", 'red');
                    e.preventDefault();
                    return;
                }
                $('input').eq(j).parent().next(".tips").text("此处不能为空");
                $('input').eq(j).parent().next(".tips").css("color", 'red');
                e.preventDefault();
                return;
            }
        }
        //协议
        if ($("#xieyi")[0].checked) {
            alert("注册成功");
        } else {
            $("#xieyi").next().next().next(".tips").text("请勾选协议");
            $("#xieyi").next().next().next(".tips").css("color", 'red');
            e.preventDefault();
            return;
        }
    })

})

当然还有不可缺少的css style.css

公共样式 可以根据您的习惯定义哦

@charset "utf-8";

/*以下是基本定义*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
form,
fieldset,
input,
textarea,
p {
    padding: 0;
    margin: 0;
}

ul,
li {
    list-style: none;
}

div,
figure,
img,
ul li,
p,
input {
    box-sizing: border-box;
}

body {
    font-size: 12px;
    text-decoration: none;
    margin: 0px;
    font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
}

img {
    text-decoration: none;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    display: block;
    /* max-width: 100%; */
}

a {
    text-decoration: none;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.clean {
    clear: both;
}

/*以上是基本定义*/

/*------------------------公共样式 结束--------------------------*/

/*----------------------------------------------注册页开始-------------------------------------------------*/

.reg {
    width: 100%;
    background: #f5f5f5;
}

.reg_nav {
    width: 100%;
    height: 70px;
    background: #e8e8e8;
}


.reg_nav ul {
    width: 700px;
    padding: 10px;
    margin: 0 auto;
}

.reg_nav ul li {
    width: 50%;
    float: left;
    line-height: 50px;
}

.reg_nav ul li img {
    float: left;
    height: 50px;
    padding-right: 20px;
}

.reg_nav ul li a {
    color: #333;
}

.reg_nav ul li a:hover {
    color: #23ac38;
}

.reg_title a {
    font-size: 18px;
    padding-left: 20px;
    border-left: 1px solid #999;
}

.reg_login {
    text-align: right;
}

.reg_login a {
    font-size: 14px;
}

.reg_con {
    width: 700px;
    height: 660px;
    margin: 20px auto;
}

.findpwd_con{
    height: 540px !important;
    
}

#regform {
    width: 700px;
    margin: 55px auto;
    position: relative;
    background: white;
    border: 0 none;
    border-radius: 3px;
}

#regform .fs-title {
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    padding: 20px;
    color: #2C3E50;
    border-bottom: 2px solid #f5f5f5;
    margin-bottom: 30px;
}

.register-box {
    width: 385px;
    margin: 0 auto;
    border: 1px solid #ddd;
    margin-bottom: 32px;
    border-radius: 5px;
}

.register-box:hover {
    border: 1px solid #23ac38;
}

.register-box label {
    height: 42px;
    line-height: 42px;
    padding-left: 20px;
    display: inline-block;
}

.register-box input {
    width: 260px;
    height: 28px;
    padding: 16px 10px;
    color: #666;
    border: none;
    font-family: "Microsoft YaHei", "Hiragino Sans GB";
}

.register-box input:focus {
    outline: none;
    border: none;
}

.register-box .tips {
    position: absolute;
    margin-top: 5px;
    font-size: 14px;
    color: #ccc;
}

/*用户名*/
.register-box .username_label {
    word-spacing: 10px;
}

/*密码，确认密码，*/
.register-box .other_label {
    word-spacing: 2px;
}

/*手机号*/
.register-box span {
    display: inline-block;
    width: 30px;
    height: 32px;
}

.register-box span i {
    color: #999;
}

.register-box .phone {
    padding-left: 18px;
}

/*验证码*/
#code {
    display: inline-block;
    width: 100px;
    height: 46px;
    vertical-align: middle;
    font-size: 25px;
    color: #333;
    text-align: center;
    line-height: 46px;
    background: #e5e5e5;
}

#dxcode {
    display: inline-block;
    width: 100px;
    height: 46px;
    vertical-align: middle;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 46px;
    background: #27AE60;
}

.tips-wu {
    width:385px;
    margin: 0px auto 10px;
    text-align: right;
}

.tips-wu a {
    color: #23ac38;
}


/*协议*/
.arguement {
    width: 385px;
    margin: 15px auto;
    padding-bottom: 40px;
}

.arguement input {
    vertical-align: middle;
}

.arguement a {
    color: #23ac38;
}

/*提交按钮*/
.submit_btn {
    height: 42px;
    width: 385px;
    margin: 0px auto;
    padding: 20px 0 5px;
    box-sizing: content-box;
}

.submit_btn button {
    width: 100%;
    height: 42px;
    color: #fff;
    border: 0;
    font-size: 16px;
    line-height: 42px;
    border-radius: 6px;
    background: #23ac38;
    border: 1px solid #23ac38;
}


.tijiao_btn{
    padding-bottom: 40px;
}

.dibu {
    width: 600px;
    text-align: center;
    margin: 10px auto;
}

.dibu {
    line-height: 21px;
    color: #999;
}

.dibu a {
    color: #999;
}

/*-----------------------------------------注册页结束-------------------------------------*/

下面是点击验证码 验证码就会更换的js

    //  验证码
    //   验证码刷新
    function code() {
        var str = "qwertyuiopasdfghjklzxcvbnm1234567890QWERTYUIOPLKJHGFDSAZXCVBNM";
        var str1 = 0;
        for (var i = 0; i < 4; i++) {
            str1 += str.charAt(Math.floor(Math.random() * 62))
        }
        str1 = str1.substring(1)
        $("#code").text(str1);
    }
    code();
    $("#code").click(code);

啦啦啦 结束喽 请多多包涵！！！

相关文章

网友评论

    本文标题：仿360商城注册页面

    本文链接：https://www.haomeiwen.com/subject/gmhrcqtx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    程序员

    关于我们|服务条款|联系我们|仿360商城注册页面|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！