jQuery手机端注册表单页面带滑块验证码功能代码



127 505 169



特效描述:jQuery 手机端注册 表单页面 带滑块 验证码功能,jQuery手机端注册表单页面带滑块验证码功能代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css"/>
<link href="css/drag.css" rel="stylesheet" type="text/css"/>

2. 引入JS

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/drag.js" type="text/javascript"></script>

3. HTML代码

<div class="header">
    <div class="header-container">
        <h2 class="fl"><a href="#">系统注册</a></h2>
    </div>
</div>
<div class="main">
    <div class="main-form">
        <form action="" id="form">
            <div class="form-tab">
                <ul>
                    <li class="cur-tab">
                        <span class="phone-icon"></span>
                        <span>手机注册</span>
                    </li>
                    <li>
                        <span class="email-icon"></span>
                        <span>邮箱注册</span>
                    </li>
                </ul>
            </div>
            <div class="form-content">
                <div class="phone-res">
                    <div class="form-group">
                        <label for="userName">手机号码</label>
                        <div class="input-group">
                            <input id="userName" type="text" placeholder="请输入手机号码"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="drag0">滑动验证</label>
                        <div class="drag" id="drag0"></div>
                    </div>
                    <div class="form-group">
                        <label for="cen-code">验证号码</label>
                        <div class="input-group">
                            <input id="cen-code" type="text" placeholder="请输入验证码"/>
                            <button id="getCodeBtn">获取验证码</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pwd">登录密码</label>
                        <div class="input-group">
                            <input id="pwd" type="password" placeholder="请输入登录密码"/>
                            <em></em>
                        </div>
                    </div>
                    <div class="form-group marl form-group-sp">
                        <input id="service_item" type="checkbox"/><label for="service_item"><span>同意并遵守</span><a class="service-item" href="#">《服务条款》</a></label>
                    </div>
                    <div class="form-group marl">
                        <a href="#" class="login-btn">立即注册</a>
                    </div>
                </div>
            </div>
            <div class="form-content hide">
                <div class="email-res">
                    <div class="form-group">
                        <label for="emailAdres">常用邮箱</label>
                        <div class="input-group">
                            <input id="emailAdres" type="text" placeholder="请输入常用邮箱"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="drag1">滑动验证</label>
                        <div class="drag" id="drag1"></div>
                    </div>
                    <div class="form-group">
                        <label for="cen-code">验证号码</label>
                        <div class="input-group">
                            <input type="text" placeholder="请输入验证码"/>
                            <button id="getCodeBtn0">获取验证码</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pwd0">登录密码</label>
                        <div class="input-group">
                            <input id="pwd0" type="password" placeholder="请输入登录密码"/>
                            <em></em>
                        </div>
                    </div>
                    <div class="form-group marl form-group-sp">
                        <input id="service_item0" type="checkbox"/><label for="service_item0"><span>同意并遵守</span><a class="service-item" href="#">《服务条款》</a></label>
                    </div>
                    <div class="form-group marl">
                        <a href="#" class="login-btn">立即注册</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    // input 聚焦清空 离开还原 用户输入时 后边出现清空按钮,点击可以清空
    ~function () {
        //input 聚焦清空 离开还原 用户输入时 后边出现清空按钮,点击可以清空
        function inputFun(input_id) {
            var input_id = document.getElementById(input_id), new_i = document.createElement("i");
            new_i.innerHTML = "×";
            input_id.val = input_id.getAttribute("placeholder"); // 自定义属性
            //聚焦时清空placeholder
            input_id.onfocus = function () {
                this.setAttribute("placeholder", "");
                this.style.color = "#333";
            };
            input_id.onblur = function () {
                this.setAttribute("placeholder", this.val);
                this.style.color = "#888";
            };
            // 用户输入时同时出现后边的清空按钮
            input_id.onkeydown = function () {
                if (this.value != "") {
                    this.parentNode.appendChild(new_i);
                }
            };
            input_id.onkeyup = function () {
                if (this.value == "") {
                    this.parentNode.removeChild(new_i);
                }
            };
            // 点击请空按钮 input 输入清空
            new_i.onclick = function () {
                this.parentNode.children[0].value = "";
                this.parentNode.removeChild(this);
            }
        }
        inputFun("userName");
        inputFun("pwd");
    }();
    //滑动验证
    $('.drag').drag();
    //点击获取验证码
    ~function () {
        function getCode(btnId) {
            var getCodeBtn = document.getElementById(btnId);
            var timer = null, num = 30;
            getCodeBtn.onclick = function () {
                var _this = this;
                this.className = "clicked";
                this.disabled = true;
                timer = window.setInterval(function () {
                    if (num == 0)
                    {
                        _this.className = "";
                        _this.disabled = false;
                        _this.innerHTML = "获取验证码";
                        clearInterval(timer);
                        num = 30;
                        return;
                    }
                    _this.innerHTML = num-- + " s后重新获取";
                }, 1000);
            }
        }
        getCode("getCodeBtn");
        getCode("getCodeBtn0");
    }();
    // 选项卡
    ~function () {
        var lis = document.getElementById("form").children[0].getElementsByTagName("li");
        var form_contents = $(".form-content");
        console.log(form_contents.length);
        for (var i = 0; i < lis.length; i++) {
            var liEle = lis[i];
            liEle.index = i;
            liEle.onclick = function () {
                for (var j = 0; j < lis.length; j++) {
                    var liLink = lis[j];
                    liLink.className = "";
                    form_contents[j].className = "form_contents hide";
                }
                this.className = "cur-tab";
                form_contents[this.index].className = "form_contents show";
            }
        }
    }();
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 切换按钮 表单 表单美化 表单插件 表单美化插件 滑动选项卡 滑动切换 文本框 text文本框 单选框 单选按钮 验证码 表单提交 表单验证 表单验证插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到