会员注册与验证码demo 带注释（html、css、js）

0005 会员注册与验证码demo（html、css、js）

本文实现一个简单的会员注册页面，使用到html、css、js，运用FormGroup的各类型实现用户名、密码、邮箱、验证码、生日、年龄、图片的上传等功能。

---

---

一、运行效果

二、主要源码

1.vip.html

html部分主要代码如下：

    <div class="FormArea">
        <h1 style="text-align: center">欢迎注册国际娱乐会所会员</h1>
        <form action="register.html" method="post" action="#" enctype="multipart/form-data">
            <div class="formgroup">
                <label for="username">用户名：</label>
                <input type="text" class="form_control" name="username" id="username" placeholder="输入11位手机号">
                <span style="color: brown">*必填</span>
            </div>

            <div class="formgroup">
                <label for="psd">密码：</label>
                <input type="password" class="form_control" name="psd" id="psd" placeholder="8位密码">
                <span style="color: brown">*必填</span>
            </div>

            <div class="formgroup">
                <label for="email">注册邮箱：</label>
                <input type="email" class="form_control" name="email" id="email" placeholder="例如：wust@sina.com">
                <span style="color: brown">*必填</span>
            </div>

            <div class="formgroup">
                <label for="vcode">验证码：</label>
                <input type="text" class="form_control" id="vcode" name="vcode">
                <span id="capcha"></span>
                <img src="arrow_03.png" id="change_capcha" alt="" width="30" style="vertical-align: middle;">
            </div>

            <div class="formgroup">
                <label>性别：</label>
                <label class="sex"><input type="radio" name="sex" value="male">男</label>
                <label class="sex"><input type="radio" name="sex" value="female">女</label>
            </div>

            <div class="formgroup">
                <label for="birth">生日：</label>
                <input type="date" class="form_control" name="birth" id="birth">
            </div>

            <div class="formgroup">
                <label for="years">年龄：</label>
                <input type="number" class="form_control" name="years" id="years" min="1" max="120" step="1">
            </div>

            <div class="formgroup">
                <label for="place">籍贯：</label>
                <select name="place1" id="place1">
                    <option value="0">湖北省</option>
                    <option value="1">湖南省</option>
                    <option value="2">广东省</option>
                </select>
                <select name="place2" id="place2">
                    <option value="0">武汉</option>
                    <option value="1">长沙</option>
                    <option value="2">广州</option>
                </select>
            </div>

            <div class="formgroup">
                <label for="study">个人学历</label>
                <select name="study" id="study">
                    <option value="0">本科</option>
                    <option value="1">硕士</option>
                    <option value="2">博士</option>
                </select>
            </div>

            <div class="formgroup">
                <label for="money">年薪：</label>
                <input type="range" name="money" id="money" min="0" max="1000000" step="10000" value="500000">¥
                <span id="money_msg">500000</span>
            </div>

            <div class="formgroup">
                <label>爱好：</label>
                <label class="like"><input type="checkbox" name="likes" id="likes" value="sing">唱</label>
                <label class="like"><input type="checkbox" name="likes" id="likes" value="dance">跳</label>
                <label class="like"><input type="checkbox" name="likes" id="likes" value="dance">Rap</label>
                <label class="like"><input type="checkbox" name="likes" id="likes" value="blasketball">篮球</label>
            </div>

            <div class="formgroup">
                <label>个人照片：</label>
                <input type="file" id="person_photo" accept="image/*">
                <div id="person_photo_preview"></div>
                <!--预览照片-->
            </div>

            <div class="formgroup">
                <label for="pic">个人简介：</label>
                <textarea name="intro" id="intro" cols="30" rows="10"></textarea>
            </div>

            <div class="formgroup btn_group">
                <button type="submit">提交</button>
                <button type="reset">重填</button>
            </div>

        </form>
    </div>

js部分：

    <script>
        var codeStr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
        var capcha = document.getElementById('capcha');
        var change_capcha = document.getElementById('change_capcha');
        // 用来生成随机整数
        function getRandom(n, m) { // param: (Number, Number)
            n = Number(n);
            m = Number(m);
            // 确保 m 始终大于 n
            if (n > m) {
                var temp = n;
                n = m;
                m = temp;
            }
            // 下有详细说明
            return Math.floor(Math.random() * (m - n) + n);
        }
        // 将随机生成的整数下标对应的字母放入span中
        function getCode() {
            var str = '';
            // 验证码有几位就循环几次
            for (var i = 0; i < 4; i++) {
                var ran = getRandom(0, 62);
                str += codeStr.charAt(ran);
            }
            capcha.innerHTML = str;
        }
        getCode(); // 调用函数，页面刷新也会刷新验证码

        // 点击刷新验证码        
        capcha.onclick = function () {
            getCode();
        }
        change_capcha.onclick = function () {
            getCode();
        }
        //功能：预览照片
        var fileInput = document.getElementById('person_photo');
        var preview = document.getElementById('person_photo_preview');

        fileInput.addEventListener('change', function () { // 监听change事件
            preview.style.backgroundImage = ''; // 清除背景图片          
            if (!fileInput.value) {
                return;
            }
            var file = fileInput.files[0]; // 获取File引用
            if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
                alert('不是有效的图片文件!');
                return;
            }
            var reader = new FileReader(); // 读取文件
            reader.onload = function (e) { // 发起一个异步操作来读取文件内容
                var data = e.target
                    .result; // data串形如： 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'                            
                preview.style.backgroundImage = 'url(' + data + ')';
            };
            reader.readAsDataURL(file); // 以DataURL的形式读取文件
        });
    </script>

2.vipstyle.css

代码如下：

*{
    font-size: 14px;
}

div.FormArea{
    margin-left: 20px;
    border-radius: 6px;
    width:500px;
    border: 1px solid silver;
}
div h1{
    font-size:18px;
    margin-left: 20px;
    margin-bottom: 25px;
    color:blue;
}
form .formgroup{
    margin-bottom: 10px;
}
.formgroup .form_control{
    width:200px;
    height: 20px;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius:4px;  
}

.formgroup .form_control:focus{
    background-color: rgb(201, 223, 200);
}

.formgroup label{
    display:inline-block;
    width:100px;
    text-align: right;
    font-weight:600;
}

span#capcha{
    display:inline-block;
    font-family: Arial;
    font-style: italic;
    color: blue;
    font-size: 18px;
    letter-spacing: 3px;
    font-weight: bolder;
    width: 80px;
    text-align: center;
    background-color: #D8B7E3;
    cursor: pointer;
}

.formgroup label.sex,form label.like{
    display: inline-block;
    width:60px;
    height: 34px;
    line-height: 34px;
}

.formgroup select{
    height: 34px;
    padding: 6px 12px;
}

.formgroup select#place1, form select#place2{
    width: 111px;
}

.formgroup select#study{
    width: 226px;
}

.formgroup input[type="range"]{
    margin: 0;
    position: relative;
    top: 5px;
}

span#money_msg{
    display: inline-block;
    height: 34px;
    line-height: 34px;
}

[type=file]#person_photo{
    height: 34px;
}

div#person_photo_preview{
    position: relative;
    margin-left: 105px;
    border: 1px solid silver;
    width:226px;
    height: 226px;
    background-repeat: no-repeat;
    background-position: center;
}

.formgroup textarea{
    width: 226px;
    padding: 0px;
    vertical-align: middle;
}

.btn_group{
    margin-left: 84px;
}

.btn_group button{
    padding: 6px 12px;
    margin-left: 20px;
    text-align: center;
    cursor: pointer;
    border:1px solid transparent;
    border-radius: 4px;
    border-color: #ccc;
}

.btn_group button:hover{
    background-color: grey;
}

---

资源学习与下载

本资源可以直接运行，包括：

CSDN下载：简单的注册与验证码 网页demo（html、css、js）

联系作者

如需要本资源下载也可以直接添加作者QQ，并可以获取资源预览、软件安装、工程导入、协助运行、算法解释、报告协助撰写等售后服务

随时在线，欢迎交流

QQ：2215991436（心源易码 派大星）
备用QQ：402501817（心源易码 佩奇）