【代码复用之】登录注册原生代码

最新推荐文章于 2023-04-29 02:35:19 发布

执剑走天涯xp

最新推荐文章于 2023-04-29 02:35:19 发布

阅读量304

点赞数

分类专栏：代码复用

本文链接：https://blog.csdn.net/qq_41566366/article/details/107757463

版权

代码复用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<div class="login_container">
		<div class="login_bg">
			<h4>账号登录</h4>
			<form action="@loginDomain/ctrl/ctrl.php/?path=yulecheng/login/login_handler.php" method="post" target="_self">
                <p class="check">
                    <i class="iconfont">&#xe6a6;</i>
                    <input type="text" name="userName" id="userName" value="" placeholder="会员/手机/邮箱" />
                    <span class="empty">此处不能为空</span>
                    <span class="error">格式有误，请重新输入</span>
                </p>
                <p class="wjpassword check">
                    <i class="iconfont">&#xe6a5;</i>
                    <input type="password" name="password" id="password" placeholder="6-16位字母、数字或符号" value="" />
                    <span class="empty">此处不能为空</span>
                    <span class="error">6-16位字母、数字或符号</span>
                </p>
				<input type="hidden" name="isJS" id="isJS" value="1" />
				<input type="hidden" name="from114my" id="from114my" value="1" />
				<input type="hidden" name="ref_url" id="refUrl" value="@refUrl" />
				<input type="hidden" name="loginToken" value="@Html.MakeToken()" />
                <p>
				    <a href="http://login.114my.cn/html/114my/password_find.php">忘记密码？</a>
			    </p>
			    <p class="wjpassword m19"><input type="submit" name="submit" id="submit" value="登录"/></p>
			    <p class="leftr"><a href="@Url.Action("Register", "User")">免费注册></a></p>
			</form>
			

			@*<iframe id="form_iframe" src="javascript:;" name="from_iframe" style="display:none;"></iframe>*@
		</div>
	</div>

<script src="~/ContentAE86/js/swiper.min.js"></script>
<script>
    $(function () {
        function CheckByRegs(ele) {
            var name = ele.attr("name");
            var value = ele.val();
            var reg;

            switch (name) {
                case "userName":
                    reg = /^[A-Za-z0-9]\w{3,19}$/;
                    break;
                case "password":
                    reg = /^(\w){6,20}$/;
                    break;
            }

            var oP = ele.parent("p");
            if (!value) {
                oP.children('.empty').css("display", "block");
                return false;
            }
            else {
                if (reg.test(value)) {
                    return true;
                }
                else {
                    oP.children('.error').css("display", "block");
                    return false;
                }
            }
        }
        
        $(".login_bg form p:lt(2)").children('input').blur(function () {
            var oP = $(this).parent("p");
            oP.children(".empty").css("display", "none");
            oP.children(".error").css("display", "none");
            CheckByRegs($(this))
        })


        $("#submit").click(function (e) {
            var flag = true;
            let elements = $(".login_container .login_bg form .check input");
            elements.each(function () {
                var oP = $(this).parent("p");
                oP.children(".empty").css("display", "none");
                oP.children(".error").css("display", "none");
                if (!CheckByRegs($(this))) {
                    flag = false
                }
            });

            if (!flag) {
                e.preventDefault();
                return false;
            }

            $("form").submit();
        })
    })
</script>

css

.login-box {
	height:600px;
	position:relative;
}
.login_container {
    width: 1200px;
	margin:0 auto;
	position:relative;
	margin-top:-500px;
	z-index:9;
}

    .login_container .login_bg {
        width: 344px;
        height: 400px;
        background-color: #ffffff;
        border-radius: 2px;
        position: absolute;
        right: 60px;
        top: 0px;
        z-index: 999999;
        padding: 0 24px;
        box-sizing: border-box;
    }

        .login_container .login_bg h4 {
            color: #1971ef;
            font-size: 16px;
            padding-top: 50px;
            padding-bottom: 28px;
        }

        .login_container .login_bg form {
        }

            .login_container .login_bg form p {
                width: 100%;
                display: inline-block;
                position: relative;
                margin-bottom:15px;
            }
            .login_container .login_bg form .error {
                margin-top: 5px;
                display: none;
                color: #ff3b00;
                font-size: 12px;
            }
            .login_container .login_bg form .empty {
                margin-top: 5px;
                display: none;
                color: #ff3b00;
                font-size: 12px;
            }
            .login_container .login_bg form .wjpassword{
                margin-bottom:13px;
            }
            .login_container .login_bg form .m19{
                margin-top:19px;
            }
            .login_container .login_bg form .leftr a{
                float:left;
            }

                .login_container .login_bg form  input {
                    width: 100%;
                    display: inline-block;
                    height: 40px;
                    border-radius: 2px;
                    border: solid 1px #e6ebf1;
                    padding-left: 30px;
                    box-sizing: border-box;
                }

                .login_container .login_bg form p i {
                    position: absolute;
                    left: 0;
                    top: 12px;
                    left: 10px;
                    color: #888888;
                    font-size: 14px;
                }

                .login_container .login_bg form p a {
                    float: right;
                    color: #1971ef;
                    font-size: 12px;
                }

                .login_container .login_bg form  #submit {
                    cursor: pointer;
                    padding-left: 0;
                    background-color: #1971ef;
                    border-radius: 2px;
                    color: #fff;
                    font-size: 14px;
                    font-weight: 700;
                    border:none;
                }

注册

html

<div class="register_contaiter">
    <!--左边-->
    <div class="reg_left">
        <div class="reg_title">
            <p>有企业营业执照（含个体工商户）的用户请注册，<span>注意：一个企业营业执照仅能注册一个账号。</span></p>
        </div>
        <div class="reg_msg">
            <div class="msg_txt">
                <span>基本信息<small>..........................................................................................................................................</small></span>
            </div>
            <div class="msg_form">
                <form action="javascript:l" class="register_form">
                    <div class="view">
                        <div class="view_top">
                            <label>账号<small>*</small></label>
                            <input type="text" name="username" id="username" value="" />
                            <div class="tooltip tooltipuser">
                                <i></i>
                                <p>会员名可用小写字母(a-z)、数字(0-9)表示，长度为4-20个字符</p>
                            </div>
                        </div>
                        <div class="error erroruser">
                            <p>此处不能为空</p>
                        </div>
                    </div>
                    <div class="view">
                        <div class="view_top">
                            <label>登录密码<small>*</small></label>
                            <input type="password" name="password" id="password" value="" />
                            <div class="tooltip">
                                <i></i>
                                <p>8-20个字符，区分大小写，推荐使用数字、字母和特殊符号组合</p>
                            </div>
                        </div>
                        <div class="error">
                            <p>此处不能为空</p>
                        </div>
                    </div>
                    <div class="view">
                        <div class="view_top">
                            <label>密码确认<small>*</small></label>
                            <input type="password" name="again_password" id="again_password" value="" />
                            <div class="tooltip">
                                <i></i>
                                <p>8-20个字符，区分大小写，推荐使用数字、字母和特殊符号组合</p>
                            </div>
                            <div class="again_error" style="display: none;">
                                <i></i>
                                <p>确认密码跟上面不一致</p>
                            </div>
                        </div>
                        <div class="error">
                            <p>此处不能为空</p>
                        </div>
                    </div>
                    <div class="view">
                        <div class="view_top">
                            <label>联系人姓名<small>*</small></label>
                            <input type="text" name="name" id="name" value="" />
                            <div class="tooltip">
                                <i></i>
                                <p>联系人姓名必须是2-20个中文汉字</p>
                            </div>
                        </div>
                        <div class="error">
                            <p>请输入真实姓名</p>
                        </div>
                    </div>
                    <div class="view">
                        <div class="view_top">
                            <label>手机号码<small>*</small></label>
                            <input type="text" name="phone" id="phone" value="" />
                            <a href="javascript:;" class="T-getCode">获取验证码</a>
                            <div class="tooltip">
                                <i></i>
                                <p>手机号码输入有误</p>
                            </div>
                        </div>
                        <div class="error">
                            <p>号码可用于登录网站和接收本站信息不能为空</p>
                        </div>
                    </div>
                    <div class="view">
                        <div class="view_top">
                            <label>手机验证码<small>*</small></label>
                            <input type="text" name="yzm" id="vcode" value="" />
                            <div class="tooltip">
                                <i></i>
                                <p>短信验证码必须为6位数</p>
                            </div>
                        </div>
                        <div class="error">
                            <p>请输入您的短信验证码</p>
                        </div>
                    </div>
                    <div class="submit">
                        <a href="javascript:;">立即注册</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="success_login">
        <form action="@loginDomain/ctrl/ctrl.php/?path=yulecheng/login/login_handler.php" method="post" target="_self">
            <input type="text" name="userName" id="_username" value="" />
            <input type="password" name="password" id="_password" value="" />
            <input type="hidden" name="isJS" id="isJS" value="1" />
            <input type="hidden" name="from114my" id="from114my" value="1" />
            <input type="hidden" name="ref_url" id="refUrl" value="/Home/Index" />
            <input type="hidden" name="token" id="_token" value="@Html.MakeToken()" />
        </form>
    </div>
    <!--右边-->
    <div class="reg_right">
        <p>已经是会员？<a href="@Url.Action("Login","User")" class="ljlogin">立即登录</a></p>
        <p>忘记了密码？<a href="@loginDomain/html/114my/password_find.php" class="zhpsw">找回密码</a></p>
        <div class="wxqrcode">
            <div class="wxqrcode_top">
                <img src="~/ContentAE86/images/wx.png" />
                <span>客服微信(9:00-17:00)</span>
            </div>
            <div class="wx_img">
                <img src="~/ContentAE86/images/qrcode.jpg" />
                <span>手机微信扫一扫添加客服</span>
            </div>
        </div>
    </div>
</div>

javascript

<script src="~/ContentAE86/js/jquery-1.11.0.min.js"></script>
<script>
    $(function () {
        function CheckByRegs(ele) {
            var element = ele;

            var name = element.attr("name");
            var value = element.val();
            switch (name) {
                case "username":
                    var reg = /^[A-Za-z0-9]\w{3,19}$/;
                    break;
                case "again_password":
                case "password":
                    var reg = /^(\w){8,20}$/;
                    break;
                case "name":
                    var reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
                    break;
                case "phone":
                    var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
                    break;
                case "yzm":
                    var reg = /^[0-9]{6}$/
                    break;
            }

            var view = element.parents('.view');
            if (!value) {
                view.find(".tooltip").hide();
                view.find('.error').css("visibility", "initial");
                return false;
            }
            else {
                view.find('.error').css("visibility", "hidden");
                if (reg.test(value)) {
                    view.find(".tooltip").hide();
                    if (name == "again_password") {
                        var password = $('.register_form').find('input[name=password]').val();
                        if (password != value) {
                            view.find(".again_error").show();
                            return false;
                        } else {
                            view.find(".again_error").hide();

                        }
                    }
                }
                else {
                    view.find(".tooltip").show();
                    return false;
                }
            }

            return true;

        }


        $(".view input").blur(function () {
            CheckByRegs($(this));
        });

        //验证码
        var validCode = true;
        $(".T-getCode").click(function () {

            if (!CheckByRegs($("form .view .view_top #phone"))) return false;

            if (!validCode) return false;

            var phone = $("form .view .view_top #phone").val() + "";
            $.ajax({
                type: "GET",
                url: "/User/GetVcode",
                data: {
                    phone: phone
                },
                dataType: "json",
                success: function (data) {
                    if (data.Status == 1) {
                        alert(data.Info);
                        var time = data.Data.WaitTimeSecond;
                        var code = $(".T-getCode");
                        if (validCode) {
                            validCode = false;
                            var t = setInterval(function () {
                                time--;
                                code.html(time + "秒").css("background", "#a09494").attr("class", "");
                                if (time * 1 == 0) {
                                    clearInterval(t);
                                    code.html("重新获取").css("background", "#1971ef").attr("class", "T-getCode");
                                    validCode = true;
                                }
                            }, 1000)
                        }
                    } else {
                        alert(data.Info);
                    }
                }
            });
        });



        $(".submit").click(function (e) {

            var flag = true;
            $("form .view .view_top input").each(function () {
                if (!CheckByRegs($(this))) {
                    flag = false;
                }
            });
            if (!flag) return false;

            $.ajax({
                type: "POST",
                url: "/User/Register",
                data: {
                    UserName: $(this).parent().find("input[id='username']").val(),
                    Password: $(this).parent().find("input[id = 'password']").val(),
                    RePassword: $(this).parent().find("input[id = 'again_password']").val(),
                    Name: $(this).parent().find("input[id = 'name']").val(),
                    Mobile: $(this).parent().find("input[id = 'phone']").val(),
                    VerificationCode: $(this).parent().find("input[id = 'vcode']").val(),
                    Token: $(this).parent().find("input[id='token']").val(),
                },
                dataType: "json",
                success: function (data) {
                    if (data.Status == 1) {
                        $("#_username").attr("value", $("#username").val());
                        $("#_password").attr("value", $("#password").val());
                        $(".success_login form").submit();
                    } else {
                        alert(data.Info);
                    }
                }
            });
        })
    })


</script>

css

.register_contaiter{
	width: 1200px;
	background-color: #f7f9fa;
	box-shadow: 0px 0px 20px 0px 
		rgba(0, 0, 0, 0.03);
	border-radius: 2px;
	margin: 0 auto;
	position: relative;
	top: -90px;
	overflow: hidden;
}
.register_contaiter .reg_left{
	width: 840px;
	float: left;
	background-color: #ffffff;
	border-radius: 2px;
	padding: 60px 40px;
	box-sizing: border-box;
}
.register_contaiter .reg_left .reg_title{
	margin-bottom: 50px;
}
.register_contaiter .reg_left .reg_title p{
	font-size: 14px;
	color: #333333;
}
.register_contaiter .reg_left .reg_title p span{
	color: #ff3b00;
}
.register_contaiter .reg_left .reg_msg{
	
}
.register_contaiter .reg_left .reg_msg .msg_txt{
	width: 100%;
	display: inline-block;
	color: #e6ebf1;
}
.register_contaiter .reg_left .reg_msg .msg_txt span{
	color: #999999;
	font-size: 12px;
}
.register_contaiter .reg_left .reg_msg .msg_txt span small{
	margin-left: 20px;
	color: #e6ebf1;
	font-size: 18px;
}
.register_contaiter .reg_left .reg_msg .msg_form{
	width: 100%;
	display: inline-block;
	padding-top: 50px;
}
.register_contaiter .reg_left .reg_msg .msg_form form{
	
}
.register_contaiter .reg_left .reg_msg .msg_form form .view{
	width: 100%;
	display: inline-block;
	margin-bottom: 20px;
}
.register_contaiter .reg_left .reg_msg .msg_form form .view .view_top{
	width: 100%;
	display: inline-block;
	position: relative;
}
.register_contaiter .reg_left .reg_msg .msg_form form .view .view_top label{
	width: 100px;
	display: inline-block;
	text-align: right;
	font-size: 12px;
	color: #333;
}
.register_contaiter .reg_left .reg_msg .msg_form form .view .view_top label small{
	color: #ff3b00;
}
.register_contaiter .reg_left .reg_msg .msg_form form .view .view_top input{
	width: 360px;
	height: 40px;
	border-radius: 2px;
	border: solid 1px #e6ebf1;
	display: inline-block;
	padding:0 20px;
	box-sizing: border-box;
	position: relative;
}
.register_contaiter .reg_left .reg_msg .msg_form form .view .view_top a{
	position: absolute;
	left: 383px;
	font-size: 14px;
	background: #1971ef;
	height: 40px;
	line-height: 40px;
	width: 80px;
	border-radius: 0 2px 2px 0;
	text-align: center;
	color: #fff;
}
.register_contaiter .reg_left .reg_msg .msg_form form .view .view_top .tooltip{
	padding: 10px;
	background: #eaf5fe;
	border:solid 1px #c4e4fd;
	width: 300px;
	display: inline-block;
	box-sizing: border-box;
	position: absolute;
	right: -40px;
	top: 0;
	display: none;
}
.register_contaiter .reg_left .reg_msg .msg_form form .view .view_top .tooltip i{
	background: #eaf5fe;
	border:solid 1px #c4e4fd;
	width: 10px;
	height: 10px;
	position: absolute;
	transform: rotate(45deg);
	left: -6px;
	top: 10px;
	border-top: none;
	border-right: none;
}
.register_contaiter .reg_left .reg_msg .msg_form form .view .view_top .tooltip p{
	font-size: 12px;
	color: #666666;
}
.register_contaiter .reg_left .reg_msg .msg_form form .view .error{
	margin-top: 5px;
	visibility: hidden;
}
.register_contaiter .reg_left .reg_msg .msg_form form .view .error p{
	color: #ff3b00;
	font-size: 12px;
	padding-left: 102px;
}
.register_contaiter .reg_left .reg_msg .msg_form .submit{
	width: 260px;
	height: 40px;
	background-color: #1971ef;
	border-radius: 2px;
	text-align: center;
	line-height: 40px;
	margin-left: 104px;
}
.register_contaiter .reg_left .reg_msg .msg_form .submit a{
	width: 100%;
	height: 100%;
	display: inline-block;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}
/*右边*/
.register_contaiter .reg_right{
	width: 280px;
	background-color: #ffffff;
	border-radius: 2px;
	padding: 25px 30px;
	box-sizing: border-box;
	float: right;
	margin-top: 40px;
	margin-right: 40px;
}
.register_contaiter .reg_right p{
	color: #333333;
	font-size: 12px;
	margin-bottom: 10px;
}
.register_contaiter .reg_right p .ljlogin{
	width: 98px;
	height: 40px;
	background-color: #1971ef;
	border-radius: 2px;
	display: inline-block;
	text-align: center;
	line-height: 40px;
	color: #fff;
	font-size: 14px;
	margin-left: 15px;
}
.register_contaiter .reg_right p .zhpsw{
	color: #1971ef;
	font-size: 12px;
	margin-left: 15px;
}
.register_contaiter .reg_right .wxqrcode{
	margin-top: 20px;
}
.register_contaiter .reg_right .wxqrcode .wxqrcode_top{
	margin-bottom: 5px;
}
.register_contaiter .reg_right .wxqrcode .wxqrcode_top img{
	width: 14px;
	height: 11px;
	margin-right: 4px;
}
.register_contaiter .reg_right .wxqrcode .wxqrcode_top span{
	color: #333333;
	font-size: 14px;
}
.register_contaiter .reg_right .wxqrcode .wx_img{
	text-align: center;
}
.register_contaiter .reg_right .wxqrcode .wx_img img{
	width: 150px;
	height: 150px;
}
.register_contaiter .reg_right .wxqrcode .wx_img span{
	color: #888888;
	font-size: 12px;
	display: block;
}
.success_login {
	display: none;
}

执剑走天涯xp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【代码复用之】登录注册原生代码

登录html<div class="login_container"> <div class="login_bg"> <h4>账号登录</h4> <form action="@loginDomain/ctrl/ctrl.php/?path=yulecheng/login/login_handler.php" method="post" target="_self"> <p class=
复制链接

扫一扫

专栏目录