jQuery实现用户注册输入验证和监听事件 - Kingchan

结构（html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="user-scalable=no;">
    <title>register</title>
    <link rel="stylesheet" href="./css/register.css">
</head>
<body>
<div id="main_box">
    <div id="content">
        <img id="close" src="./images/return.png" alt="关闭" >
        <div class="titleName">注册账号</div>
        <form action="#">
            <ul id="main_list">
                <li class="_list">
                    <i class="phoneIcon"></i>
                    <input id="userName" type="text" placeholder="请输入手机号码" maxlength="11">
                    <i class="deleteIcon deleteUs"></i>
                </li>
                <li class="_list">
                    <i class="mailIcon"></i>
                    <input id="mailBox" type="password" placeholder="请输入验证码">
                    <input id="verificationCode" type="button" value="发送验证码" >
                </li>
                <li class="_list">
                    <i class="passwordIcon"></i>
                    <input id="userPswd" type="password" placeholder="请输入登录密码" maxlength="32">
                    <i class="delPsaIcon deletePs"></i>
                    <i class="eyeIcon"></i>
                </li>
                <input id="immediatelyLogin" type="submit" value="立即注册">
            </ul>
        </form>
        <div class="bottom_div">
            <p id="statement">点击立即注册即表示阅读并同意<span id="agreement">《艾家用户服务协议》</span></p>
        </div>
        
    </div>
    <div id="tooltip"></div>
    <div id="succeed"><img src="./images/register.png" alt="注册成功"></div>
</div>
<script src="./js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="./js/register.js" type="text/javascript"></script>
</body>
</html>

样式（css）：

*,html,body{
    margin: 0;
    padding: 0;
    font-family: "微软雅黑", "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
}
ul,li{
    list-style-type: none;
}
input[type=button], input[type=submit], input[type=file], button {
    cursor: pointer;
    -webkit-appearance: none;
    outline: none;
}
/*移动端点击阴影*/
a,input,img,textarea,span,div,ul{
    -webkit-tap-highlight-color:rgba(0,0,0,0)!important;
}

#main_box{
    width: 100%;
    height: auto;
    position: relative;
    padding: 20% 0 49.5% 0;
    background: url("../images/bg.png") 0 0 repeat-y;
    background-size: 100%;
}
#content{
    width: 100%;
    height: auto;
    text-align: center;
    box-sizing: border-box;
}
#close{
    width: 36px;
    height: auto;
    position: absolute;
    left: 5%;
    top: 3%;
}
.titleName{
    font-size: 46px;
    color: #fff;
}
#main_list{
    width: 100%;
    height: auto;
}
._list{
    width: 80%;
    height: 120px;
    padding: 3.5% 3% 2%;
    margin: 8% auto;
    background: #fff;
    border-radius: 60px;
    box-sizing: border-box;
    text-align: center;
}
#userName{
    width: 80%;
    height: 60px;
    border: 0;
    font-size: 46px;
    border: none;
    outline: none;
    padding-left: 3%;
    vertical-align: middle;
    box-sizing: border-box;
}
#userPswd{
    width: 70%;
    height: 60px;
    border: 0;
    font-size: 46px;
    border: none;
    outline: none;
    padding-left: 3%;
    vertical-align: middle;
    box-sizing: border-box;
}
#mailBox{
    width: 60%;
    height: 60px;
    border: 0;
    margin-bottom: 25px;
    font-size: 46px;
    border: none;
    outline: none;
    padding-left: 3%;
    vertical-align: middle;
    box-sizing: border-box;
}
#verificationCode{
    width: 25%;
    background: #fff;
    color: #888;
    font-size: 36px;
    padding-left: 0;
    border: none;
    border: 0;
}
._list>i{
    vertical-align: middle;
}
#immediatelyLogin{
    width: 80%;
    height: 120px;
    margin: 0 auto;
    -webkit-appearance: none;
    background: #ffc7a7;
    border-radius: 60px;
    color: #fff;
    font-size: 42px;
    border: 0;
    border: none;
}
.bottom_div{
    width: 80%;
    height: auto;
    overflow: hidden;
    margin: 8% auto;
    font-size: 36px;
    color: #fff;
}
.phoneIcon{
    display: inline-block;
    width: 50px;
    height: 60px;
    background: url("../images/mobile.png") 0 0 no-repeat;
    background-size: 100%;
}
.mailIcon{
    display: inline-block;
    width: 50px;
    height: 60px;
    background: url("../images/mailbox.png") 0 -10px no-repeat;
    background-size: 100%;
}
.passwordIcon{
    display: inline-block;
    width: 50px;
    height: 60px;
    background: url("../images/password.png") 0 0 no-repeat;
    background-size: 100%;
}
.deleteIcon{
    display: inline-block;
    width: 50px;
    height: 60px;
    background: #fff;
    background-size: 100%;
}
.deleteIcon1{
    display: inline-block;
    width: 50px;
    height: 60px;
    background: url("../images/delete1.png") 0 0 no-repeat;
    background-size: 100%;
}
.delPsaIcon{
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #fff;
    background-size: 100%;
}
.delPsaIcon1{
    display: inline-block;
    width: 50px;
    height: 50px;
    background: url("../images/delete1.png") 0 0 no-repeat;
    background-size: 100%;
}

.eyeIcon{
    display: inline-block;
    width: 50px;
    height: 60px;
    margin-left: 20px;
    background: url("../images/eye.png") 0 3px no-repeat;
    background-size: 100%;
}
.eyeIcon1{
    display: inline-block;
    width: 50px;
    height: 60px;
    margin-left: 20px;
    background: url("../images/eye1.png") 0 3px no-repeat;
    background-size: 100%;
}
#statement{
    font-size: 32px;
}
#agreement{
    color: #e35303;
}
#tooltip{
    width: 70%;
    height: 100px;
    line-height: 100px;
    color: #fff;
    font-size: 40px;
    text-align: center;
    border-radius: 50px;
    display: none;
    background: rgba(0,0,0,0.7);
    position: absolute;
    top: 52%;
    left: 15%;
}
#succeed{
    width: 30%;
    height: auto;
    display: none;
    position: absolute;
    top: 35%;
    left: 35%;
}

行为（JavaScript）：

/**
 * Created by Administrator on 2017/9/6.
 */
$(function () {

    //删除用户名
    $(".deleteUs").click(function () {

        var valLength = $("#userName").val().length;

        if (valLength > 0) {

            $("#userName").val("");
        }

        $(this).attr("class","deleteIcon deleteUs");

        // $("#userName").focus();
        //按钮颜色变浅黄色
        // $("#immediatelyLogin").css("background","#ffc7a7");
    })

    //删除密码
    $(".deletePs").click(function () {

        var psLength = $("#userPswd").val().length;

        if (psLength > 0) {

            $("#userPswd").val("");
        }

        $(this).attr("class","delPsaIcon");

        // $("#userPswd").focus();

    })

    //改变密码显示状态
    $(".eyeIcon").toggle(function () {

        $(this).prop("class","eyeIcon1");

        $("#userPswd").prop("type","text");


    },function () {

        $(this).prop("class","eyeIcon");

        $("#userPswd").prop("type","password");

    });

    //快速注册跳转
    $(".textLeft").click(function () {

        window.location.href="./register.html";
    });

    //忘记密码跳转
    $(".textRight").click(function () {

        window.location.href="./resetPasswords.html";
    });

    //点击关闭跳转
    $("#close").click(function () {history.back(-1)});

    //监听输入
    $("#userName").bind("input propertychange change focus",function(){
        // console.log($("#userName").val());
        var reg = /^[1][34578][0-9]{9}$/; //手机号码

        var val = $("#userName").val();

        var pass = /^[a-zA-Z0-9]{6,32}$/; //6~18位密码

        var passval = $("#userPswd").val();

        if(reg.test(val)){

            $("#verificationCode").css("color","#ffa414");

        }else {

            $("#verificationCode").css("color","#888");

        };

        if(reg.test(val) && pass.test(passval)){

            $("#immediatelyLogin").css("background","#E95503");

        }else {

            $("#immediatelyLogin").css("background","#ffc7a7");
        };

        if (val.length > 0) {

            $(".deleteIcon").attr("class","deleteIcon1 deleteUs");

        }else if (val.length < 1) {

            $(".deleteIcon1").attr("class","deleteIcon deleteUs");

        }

    });

    //监听输入
    $("#userPswd").bind("input propertychange change focus",function(){
        // console.log($("#userName").val());
        var reg = /^[1][34578][0-9]{9}$/; //手机号码

        var val = $("#userName").val();

        var pass = /^[a-zA-Z0-9]{6,32}$/; //6~18位密码

        var passval = $("#userPswd").val();

        if (passval.length > 0) {

            $(".delPsaIcon").attr("class","delPsaIcon1");

        }else if (passval.length < 1) {

            $(".delPsaIcon1").attr("class","delPsaIcon");

        };

        if(reg.test(val) && pass.test(passval)){

            $("#immediatelyLogin").css("background","#E95503");

        }else {
            $("#immediatelyLogin").css("background","#ffc7a7");
        };

    });

    function forbidden () {
        // alert("111");
        $("#immediatelyLogin").removeAttr("disabled");
    }

    //正则匹配
    $("#immediatelyLogin").click(function () {


        var reg = /^[1][34578][0-9]{9}$/; //手机号码

        var val = $("#userName").val();

        var vLength = $("#userName").val().length;

        var pass = /^[a-zA-Z0-9]{6,32}$/; //6~18位密码

        var passval = $("#userPswd").val();

        var pLength = $("#userPswd").val().length;

        $("#immediatelyLogin").attr("disabled","disabled");
        //3庙后解除禁用
        setTimeout(function () {forbidden();},3000);

        if(reg.test(val) && pass.test(passval)){

            $("#immediatelyLogin").css("background","#E95503");

            $("#succeed").fadeIn(300).delay(3000).fadeOut(300);

            return true;

        }else if (vLength < 11){

            $("#tooltip").fadeIn(300).delay(3000).fadeOut(300).html("手机号码不能小于11位");

            return false;

        }else if (pLength < 6) {

            $("#tooltip").fadeIn(300).delay(5000).fadeOut(300).html("密码输入不得少于6位");

            return false;

        } else {

            $("#tooltip").fadeIn(300).delay(5000).fadeOut(300).text("用户名或密格式不正确");

            return false;
        };

    });
});
//解除禁用发送验证码
function disabledCode() {
    $("#verificationCode").removeAttr("disabled");
}

//发送验证码定时器
var countdown=60;
$("#verificationCode").bind("click",function () {

    var obj = $("#verificationCode");

    var reg = /^[1][34578][0-9]{9}$/; //手机号码

    var val = $("#userName").val();

    if (reg.test(val)) {

        settime(obj);

    }else {

        $("#tooltip").fadeIn(300).delay(3000).fadeOut(300).text("手机号码格式不正确");

        //禁用发送验证码
        $(this).attr("disabled","disabled");
        //3秒后解除禁用
        setTimeout(function () {disabledCode();},3000);

        return false;
    }



});
function settime(obj) { //发送验证码倒计时

    if (countdown == 0) {

        obj.attr('disabled',false);

        obj.val("发送验证码");

        obj.css("color","#ffa414");

        countdown = 60;

        return;

    } else {

        obj.attr('disabled',true);

        obj.val( + countdown + "秒后重发");

        obj.css("color","#888");

        countdown--;
    }
    setTimeout(function() {settime(obj) },1000);
}

注：本文所用的jQuery文件是本地路径，如需看整体效果需要自行引入jQuery。如果不想下载jQuery，也可以使用在线的jQuery文件。百度jQuery在线引用链接如下：

http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js
http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js
http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js
http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js

posted on 2017-09-21 12:01 Kingchan 阅读(576) 评论(0) 编辑收藏举报

刷新页面返回顶部