精华内容
下载资源
问答
  • 很好用的html5用户注册模板,美观实用,做参考
  • HTML5,仿京东登录注册页面
  • bootstrap做登录注册页面带验证

    千次下载 热门讨论 2015-12-15 18:26:05
    用bootstrap做的登录,注册页面,使用validate进行表单验证,是本人从空白页面搭建的,亲测可用,1积分算是我的辛苦费吧。 我会通过博客注明知识点:http://blog.csdn.net/qq_19558705; 希望能帮到大家。没有积分的...
  • html 静态 登陆 注册 页面

    热门讨论 2013-09-30 22:08:39
    静态Html页面,登陆注册 页面优美
  • HTML登录注册页面简单实现

    千次阅读 多人点赞 2019-10-27 21:30:18
    效果参考:登录页面,注册页面 使用了bootstrap,jQuery。 登录页面源码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> &...

    完整代码下载:

    github:传送门 , 码云: 传送门

    效果参考: 登录页面注册页面

    临时在线测试地址:http://139.9.68.218:3333/login2.html

    使用了bootstrap,jQuery。

    测试环境:

    操作系统:CentOS7

    web服务器:Boa

    数据库:sqlite3

    相关代码:

    登录页面源码 login.html

    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>
                login
            </title>
            <script src="js/jquery-2.2.3.min.js" type="text/javascript"></script>
            <script src="js/jquery-ui.min.js" type="text/javascript"></script>
            <link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
            <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
            <script src="js/bootstrap.min.js" type="text/javascript"></script>
            <link type="text/css" href="css/login.css" rel="stylesheet">
            <script language="JavaScript" type="text/javascript">
    			function checkUserName() {    //验证用户名
    				var fname = document.myform.username.value;
    				var reg = /^[0-9a-zA-Z]/;
    				if (fname.length != 0) {
    					for (i = 0; i < fname.length; i++) {
    						if (!reg.test(fname)) {
    							alert("只能输入字母或数字");
    							return false;
    						}
    					}
    					if (fname.length < 4 || fname.length > 16) {
    						alert("只能输入4-16个字符");
    						return false;
    					}
    				}
    				else {
    					alert("请输入用户名");
    					document.myform.username.focus();
    					return false;
    				}
    				return true;
    			}
    
    			function passCheck() { //验证密码
    				var userpass = document.myform.password.value;
    				if (userpass == "") {
    					alert("未输入密码 \n" + "请输入密码");
    					document.myform.password.focus();
    					return false;
    				}
    				if (userpass.length < 6 || userpass.length > 12) {
    					alert("密码必须在 6-12 个字符。\n");
    					return false;
    				}
    				return true;
    			}
    
    			function passCheck2() {
    				var p1 = document.myform.password.value;
    				var p2 = document.myform.password2.value;
    				if (p1 != p2) {
    					alert("确认密码与密码输入不一致");
    					return false;
    				} else {
    					return true;
    				}
    			}
    
    			function checkEmail() {
    				var Email = document.getElementById("email").value;
    				var e = Email.indexOf("@" && ".");
    				if (Email.length != 0) {
    					if (e > 0) {
    						if (Email.charAt(0) == "@" && ".") {
    							alert("符号@和符号.不能再邮件地址第一位");
    							return false;
    						}
    						else {
    							return true;
    						}
    					}
    					else {
    						alert("电子邮件格式不正确\n" + "必须包含@符号和.符号!");
    						return false;
    					}
    				}
    				else {
    					alert("请输入电子邮件!");
    					return false;
    				}
    			}
    
    			function checkbirthday() {    //验证用户名
    				var year = document.myform.birthday.value;
    				if (year < 1949 || year > 2007) {
    					alert("年份范围从1949-2007年");
    					return false;
    				}
    				return true;
    			}
    
    
    			function validateform() {
    				if (checkUserName() && passCheck() && passCheck2() && checkEmail() && checkbirthday())
    					return true;
    				else
    					return false;
    			}
    
    			function clearText() {
    				document.myform.user.value = "";
    				document.myform.password.value = "";
    			}
    
    			//显示隐藏对应的switchPwd()方法:
    			$(function () {
    				// 通过jqurey修改
    				$("#passwordeye").click(function () {
    					let type = $("#password").attr('type')
    					if (type === "password") {
    						$("#password").attr("type", "text");
    					} else {
    						$("#password").attr("type", "password");
    					}
    				});
    			});
            </script>
        </head>
        <body>
            <img src="img/login_bg.jpg" class="bg">
            <div id="head">
                <img src="img/login_head.png" width="100%" height="auto">
            </div>
            <div id="center">
                <form name="myform" onsubmit="return validateform( )" enctype="multipart/form-data" action="cgi-bin/login.cgi" method="post" id="myform">
                    <div class="input-group">
                        <h3>
                            用户名:
                        </h3>
    					&nbsp;
    					<input class="form-control" id="username" name="username" type="text" style="height:40px" value="" placeholder="只能输入字母或数字,4-16个字符" autocomplete="off">
                    </div>
                    <div class="input-group">
                        <h3>
                            密&nbsp;&nbsp;&nbsp;码:
                        </h3>
    					&nbsp;
    					<input class="form-control" id="password" name="password" type="password" style="height:40px" value="" placeholder="密码长度6-12位" autocomplete="off"> 
    					<span class="input-group-btn"><input class="btn btn-default" id="passwordeye" type="button" value="show/hide"></span>
                    </div>
                    <div id=" btn">
                        <input class="btn btn-primary" name="loginButton" type="submit" id="login" value="登录"> 
    					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    					<a href="register.html"><input class="btn btn-primary" name="registerButton" id="register" type="button" value="注册"></a>
                    </div>
                </form>
            </div>
            <div id="bottom">
                <div class="footer" style="color:white;">
                    Copyright © 2013-2019 All Rights Reserved. 备案号:
                </div>
            </div>
        </body>
    </html>

    注册页面源码 register.html

    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>
                register
            </title>
            <script src="js/jquery-2.2.3.min.js" type="text/javascript"></script>
            <script src="js/jquery-ui.min.js" type="text/javascript"></script>
            <link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
            <link type="text/css" href="css/register.css" rel="stylesheet">
            <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
            <script src="js/bootstrap.min.js" type="text/javascript"></script>
            <script language="JavaScript" type="text/javascript">
    			function checkUserName() { //验证用户名
                    var fname = document.myform.username.value;
                    var reg = /^[0-9a-zA-Z]/;
                    if (fname.length != 0) {
                        for (i = 0; i < fname.length; i++) {
                            if (!reg.test(fname)) {
                                alert("只能输入字母或数字");
                                return false;
                            }
                        }
                        if (fname.length < 4 || fname.length > 16) {
                            alert("只能输入4-16个字符");
                            return false;
                        }
                    } else {
                        alert("请输入用户名");
                        document.myform.username.focus();
                        return false;
                    }
                    return true;
                }
    
                function passCheck() { //验证密码
                    var userpass = document.myform.password.value;
                    if (userpass == "") {
                        alert("未输入密码 \n" + "请输入密码");
                        document.myform.password.focus();
                        return false;
                    }
                    if (userpass.length < 6 || userpass.length > 12) {
                        alert("密码必须在 6-12 个字符。\n");
                        return false;
                    }
                    return true;
                }
    
                function passCheck2() {
                    var p1 = document.myform.password.value;
                    var p2 = document.myform.password2.value;
                    if (p1 != p2) {
                        alert("确认密码与密码输入不一致");
                        return false;
                    } else {
                        return true;
                    }
                }
    
                function checkEmail() {
                    var Email = document.getElementById("email").value;
                    var e = Email.indexOf("@" && ".");
                    if (Email.length != 0) {
                        if (e > 0) {
                            if (Email.charAt(0) == "@" && ".") {
                                alert("符号@和符号.不能再邮件地址第一位");
                                return false;
                            } else {
                                return true;
                            }
                        } else {
                            alert("电子邮件格式不正确\n" + "必须包含@符号和.符号!");
                            return false;
                        }
                    } else {
                        alert("请输入电子邮件!");
                        return false;
                    }
                }
    
                function checkbirthday() { //验证用户名
                    var year = document.myform.birthday.value;
                    if (year < 1949 || year > 2007) {
                        alert("年份范围从1949-2007年");
                        return false;
                    }
                    return true;
                }
    
                function validateform() {
                    if (checkUserName() && passCheck() && passCheck2() && checkEmail() && checkbirthday()) return true;
                    else return false;
                }
    
                function clearText() {
                    document.myform.user.value = "";
                    document.myform.password.value = "";
                }
    
                //显示隐藏对应的switchPwd()方法:
                $(function() {
                    // 通过jqurey修改
                    $("#passwordeye").click(function() {
                        let type = $("#password").attr('type');
                        if (type === "password") {
                            $("#password").attr("type", "text");
                        } else {
                            $("#password").attr("type", "password");
                        }
                    });
                    $("#passwordeye2").click(function() {
                        let type = $("#password2").attr('type');
                        if (type === "password") {
                            $("#password2").attr("type", "text");
                        } else {
                            $("#password2").attr("type", "password");
                        }
                    });
                });
            </script>
        </head>
        <body>
            <img src="img/login_bg.jpg" class="bg">
            <div id="head">
                <img src="img/register_head.png" width="100%" height="auto">
            </div>
            <div id="center">
                <form name="myform" onsubmit="return validateform()" enctype="multipart/form-data" action="cgi-bin/register.cgi" method="post" id="myform">
                    <div class="input-group">
                        <h3>
                            用&nbsp;&nbsp;户&nbsp;&nbsp;名:
                        </h3>
    					<input class="form-control" id="username" name="username" type="text" style="height:40px" value="" placeholder="只能输入字母或数字,4-16个字符" autocomplete="off">
                    </div>
                    <div class="input-group">
                        <h3>
                            密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:
                        </h3>
    					<input class="form-control" id="password" name="password" type="password" style="height:40px" value="" placeholder="密码长度6-12位" autocomplete="off">
    					<span class="input-group-btn"><input class="btn btn-default" id="passwordeye" type="button" value="show/hide"></span>
                    </div>
                    <div class="input-group">
                        <h3>
                            确认密码:
                        </h3>
    					<input class="form-control" id="password2" name="password2" type="password" style="height:40px" value="" autocomplete="off">
    					<span class="input-group-btn"><input class="btn btn-default" id="passwordeye2" type="button" value="show/hide "></span>
                    </div>
                    <div id="btn">
                        <input name="registerButton" class="btn btn-primary" type="submit" id="register" value="注册">
    					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    					<a href="login.html"><input class="btn btn-primary" name="loginButton" id="login" type="button" value="登录"></a>
                    </div>
                </form>
            </div>
            <div id="bottom">
                <div class="footer" style="color:white;">
                    Copyright © 2013-2019 All Rights Reserved. 备案号:
                </div>
            </div>
        </body>
    </html>

    1.2版本

    新增 login2.html 和 register2.html 页面,对应后端 xxx2.cgi ,新增sqlite数据库,用于存储用户账号信息。

    新功能对后端进行了升级,具体效果如下:

    代码见 顶部仓库

    1.3版本

    对页面做了优化

    展开全文
  • 简单制作登录注册页面

    万次阅读 多人点赞 2018-09-05 21:45:09
    在一个网页中,html负责页面布局和内容,css负责组件具体样式,JS则与后台进行交互。 在设计网页前先介绍DIV,简单来说就是一个在网页上分割区域的方块。在DIV里面可以添加组件,包括另外的DIV。 制作登录界面。...

    在一个网页中,html负责页面布局和内容,css负责组件具体样式,JS则与后台进行交互。
    在设计网页前先介绍DIV,简单来说就是一个在网页上分割区域的方块。在DIV里面可以添加组件,包括另外的DIV。
    制作登录界面。登录界面一般有两个文本框,分别用来获取用户的用户名和密码。我们也考虑用户忘记密码和未进行注册的情况,故也要加上这两个功能区域。
    首先我们为登录界面设置一个标题:

    <title>Welcome!Please write your individual information.</title>    

    然后在body内设计我们想要用户看见的内容:

    <body>
    
            <div id ="login">
    
                <form name="login",method="post",action="*">
    
                    <div id = "loginDiv">
                        <p style="left:10px">
                        Welcome to login!</p>
                <div id="user">
                    <input type="text" placeholder="手机号\邮箱\昵称" style="height: 30px;"/>
                </div>
                <div id="password">
                    <input type="password"  placeholder="请输入密码" style="height: 30px;"/>
                </div>
                <div id="check">
                    <input type="checkbox" /><span style="font-size: x-small;">请勿在公用电脑上勾选此选项&nbsp;<a href="#">忘记密码?</a></span>
                </div>
                <input type="submit" id="loginbutton" value="登录" />
                <p  id="reg" style="font-size: x-small;left: 70px;">
                <a href="http://127.0.0.1:8020/Tb/js/register.html">注册</a>
                </p>
                </div>
    
                </form>
            </div>
        </body>

    我们首先建立了一个div里面又建立了一个表单(用户填入的信息一定是全在表单里的,然后由表单发送给后台控制器,故下面的文本框等全部是在表单中)。我们依次建立两个div分别用来装用户名和密码文本框。为什么要把它们用div装起来呢?是为了方便在CSS中对它们的位置,长宽,样式等进行设计。然后就是登录按钮,登录按扭有很多种设立方式,此处给的是具有跳转表单指定地址的提交按钮。
    最后两个功能:注册和忘记密码我们用超链接将他们表现出来,用户可以点击文字跳转到指点页面,进行对应操作。超链接一般格式如下:

    <a href="http://127.0.0.1:8020/Tb/js/register.html">这里写你想放入的字符,前面的地址即是跳转地址。</a>

    具体的div大小 、样式等由CSS决定。我们设置一个,里面为div、表单、按钮和字体等设置样式:

    <style type="text/css">
            #login{
    
            }
            #loginDiv{
                border: 1px solid #646464;
                background-color:   #E8E8E8;
                margin-top: 300px;
                margin-left: 900px;
                width: 360px;
                height: 500px;
            }
    
            #user{
                width: 270px;
                height: 34px;
                margin-top: 120px;
                margin-left: auto;
            }
            #password{
                width: 270px;
                height: 34px;
                margin-top: 40px;
                margin-left: auto;
            }
            #check{
                margin-top: 70px;
                margin-left: 60px;
            }
            #loginbutton{
                margin-left: 57px;
                width: 270px;
                height: 34px;
                margin-top: 1;
                background-color: aliceblue;
                color: burlywood;
                border:0px solid;
                border-radius:6px;
                font: normal 20px/44px "Microsoft Yahei";
            }
            #reg{
                margin-left: 300px;
                width: 100px;
            }
        </style>

    再就是文首提到的JS,,制作简单表单并未与其它表单或者底层数据进行交互,因此暂时并未用到,以后涉及到后会展示出来。


    接下来就是注册页,注册与登录页类似也是以几个文本框为主体。代码见下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Welcome to register</title>
        </head>
        <style type="text/css">
    
            #house{
                background-color:#F0F8FF;
                margin-top: 200px;
                border:1px solid #646464;;
            }
            #register{
                width: 400px;
                margin-left: 400px;
    
            }
            #ge{
                margin-left: 40px;
                width: 300px;
                height: 43px;
                border: coral;
            }
    
        </style>
        <body>
            <p style="font: '微软雅黑';font-size: large;"> Welcome to FIRSTBLOOD!</p>
            <div id="house">
                <form action="*" method="post" id="register">
                    <table>
                        <tr>
                            <td><p>手机号码</p></td>
                            <td><input placeholder="请输入您的手机号码"> </td>
                        </tr>
                        <tr>
                            <td><p>登录密码</p></td>
                            <td><input type="password" placeholder="请输入您的密码"></td>
                        </tr>
                        <tr>
                            <td><p>确认密码</p></td>
                            <td><input type="password" placeholder="再次输入密码"></td>
                        </tr>
                        <tr>
                            <td><p>请输入验证码</p></td>
                            <td><input  ></td>
                        </tr>
    
                    </table>
                    <input type="submit" id="ge" value="注册"/>
                </form>
            </div>
        </body>
    </html>
    

    在注册页面中我们以表格为骨架把内容整齐划分。

    以上便是简单制作登录和注册页面。笔者也是初学者有很多也不太明白,在此讲的比较简陋,见谅。
    下附页面截图(登录):
    这里写图片描述
    (注册)
    这里写图片描述

    展开全文
  • 用户登录注册页面

    千次阅读 2019-03-15 14:55:47
    用户登录注册页面一、目标:在公众号网页里制作一个app的分享链接(该app已经可以微信授权登录),供用户下载app。二、要求:一、绑定过:则跳转到下载页面c,点击下载就直接开始下载app;二、未绑定:则跳转到注册...

    用户登录注册页面

    一、目标:在公众号网页里制作一个app的分享链接(该app已经可以微信授权登录),供用户下载app。

    二、要求:用户点击链接的时候如果没有微信授权过,则提示授权获取用户的微信信息。用户同意授权后,获取用户信息,查询该用户信息里是否绑定过手机号(手机号字段是否为空)。

    一、绑定过:则跳转到下载页面c,点击下载就直接开始下载app;

    二、未绑定:则跳转到注册页面b,用户输入手机号,然后实时监测用户的输入,当输入11位数字后,ajax请求服务器获取数据库用户列表里的所有手机号,检测手机号是否已经注册。手机号不满11位或者没有同意协议,提交按钮都置灰不可点击

    1、没有注册过:弹出姓名,身份证,密码,验证码输入框给用户填写,填写完毕之后提交,保存到数据库后跳转到下载页面c;
    2、注册过(数据库有该手机号):直接跳转到下载页面c。

    三、以下代码为b页面代码,通过该页面掌握以下知识点:

    1、jquery实时监测input框的输入;

    $("#mobile").bind('input propertychange',function () {};
    

    2、手机号的正则验证(/^1[3|4|5|7|8]\d{9}$/);

    3、submit满则条件时可以点击提交,否则变灰不可点击(用disabled属性);

    4、判断checkbox是否选中,例如协议是否同意;

    $("input[type='checkbox']").is(':checked') ;
    

    5、提交前验证input框是否有空(用如下js里的checkNull()方法);

    6、ajax表单提交,这样可以有返回信息(form表单提交没有),方便提醒用户:

    $.ajax({
        type: "POST",//方法类型
        dataType: "json",//预期服务器返回的数据类型
        url: "downloadapp" ,//url
        data: $('#form1').serialize(),
        success: function (result) {
            if (result.status == '1') {
                window.location.href = "downapp"; //页面跳转
            }else{
                var prompt = result.msg;
                promptf(prompt); //执行方法
            }
        }
    });
    

    7、发送验证码后显示倒计时,倒计时期间不可再发送。

    一、需要引入layui.js和jquery.js文件

    <script src="layui/layui.js"></script>
    <script src="js/jquery-2.1.4.min.js"></script>
    

    二、css内容如下

    <style>
    html{width: 100%;font-size: 1.5rem;background-color: white;}
    a{text-decoration: none;}
    .content{width: 90%;margin:0 5%;}
    .logo{width: 100%;height: 10rem;}
    .logo .imgleft{float: left;width: 50%;text-align: center;height:100%;}
    .logo .imgright{float: right;width: 50%;height: 100%;}
    .logo .imgright img{float: right;height: 28%;margin-top: 18%;}
    .huanyin{width: 100%;height: 10rem;}
    .huanyin .span1{font-size:4rem;line-height: 5rem;}
    .huanyin .span2{font-size:1.6rem;line-height: 5rem;}
    .inputtext{margin-top: 5%;}
    .inputtext input{border:none;font-size: 2rem;line-height: 3rem;background-color: white;}
    .inputtext hr{margin-bottom: 6%;}
    .inputtext button{font-size: 1.7rem;width: 40%;float: right;background-color: white;color: #FFBB66;border-radius: 2rem;border: 1px solid red;}
    .inputcood{width: 58%;}
    .yinc{display: none;}
    .yinc p{color: gray;font-size: 1.2rem;}
    .xieyi{font-size:1.5rem;line-height: 2.5rem;}
    .xieyi input{zoom:250%;}
    .xieyi a{color: #3f88bf;}
    #download{font-size: 2.2rem;height: 4rem;width: 68%;margin-left: 16%;border-radius: 60px;color: white;background-color: gray;border: none;}
    .prompt{width: 90%;text-align: center;position: absolute;display: none;}
    .prompt input{width: auto;height: 3rem;color: #082c3e;background-color: #bbc1bf;font-size: 1.5rem;text-align: center;border-radius: 40px;border: none;}
    </style>
    

    三、html页面结构如下

    <div class="content">
        <div class="logo">
            <div class="imgleft">
                <img src="">
            </div>
            <div class="imgright">
                <a href="" onClick="javascript :history.back(-1);">
                    <img src="">
                </a>
            </div>
        </div>
    
        <div class="huanyin">
            <span class="span1">欢迎你</span><br>
            <span class="span2">共创价值、共享未来、共生未来!</span>
        </div>
    
        <form action="##" method="post" id="form1" onsubmit="return false">
            <div class="inputtext">
                <input type="text" name="phone" placeholder="手机号" id="mobile" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11"><hr>
                <div class="yinc">
                    <input type="hidden" name="spid" value="{$spid}">
                    <input type="text" name="name" placeholder="姓名" id="name"><hr>
                    <input type="text" name="idcard" placeholder="身份证号" oninput="value=value.replace(/[^\d]/g,'')" maxlength="18" id="idcard"><hr>
                    <input type="text" name="passwd" placeholder="登录密码" minlength="4" maxlength="12" id="passwd"><hr>
                    <p>密码必须大于等于4位,只能使用字母,数字及标点符号</p>
                    <input type="text" name="code" placeholder="短信验证码" oninput="value=value.replace(/[^\d]/g,'')" class="inputcood" id="code" maxlength="5">
                    <button type="submit" id="getCode">获取验证码</button>
                    <hr>
                </div>
            </div>
            <input type="submit" id="download" disabled="disabled" value="开启商城之旅" onclick="return checkNull()" >
        </form>
    
        <div class="xieyi">
            <input type="checkbox" id="isdown">阅读并同意<a href="">《用户服务协议》</a>和<a href="">《隐私政策》</a>
        </div>
    
        <div class="prompt" id="prompt">
            <input type="test" id="promptvalue" value="验证码错误">
        </div>
    </div>
    

    四、页面的js内容

    <script type="text/javascript">
        isdowns = 0;
        // 对手机号码输入的实时监测
        $("#mobile").bind('input propertychange',function () { 
            var mobile=$(this).val();
            if(mobile.length=='11'){
                var mobileReg = /^1[3|4|5|7|8]\d{9}$/; //手机号正则
                var phoneflag = mobileReg.test(mobile);
                if (!phoneflag) {
                    isdowns = 0;
                    alert('手机号码格式不正确!');
                    $(".yinc").css("display","none");
                } else {
                    $.ajax({
                        url:"/wap/index/getmobile",
                        data:{mobile:mobile},
                        type: "POST",
                        dataType:"json",
                        success: function(data){
                            if (data) { 
                                window.location.href = "downapp";
                            }else{
                                isdowns = 1;
                                $(".yinc").css("display","block");
                                isdownload();
                            }
                        }
                    });
                }
            }else{
                isdowns = 0;
                $(".yinc").css("display","none");
                $("#download").css("background-color","gray");
                $('#download').attr("disabled",true);
            }
        });
    
        function isdownload(){
            if ($("input[type='checkbox']").is(':checked')) {
                $("#download").css("background-color","#FFBB66");
                $('#download').attr("disabled",false);
            }   
        }
    
        $("#isdown").click(function(){
            if ($("input[type='checkbox']").is(':checked')&&isdowns=='1') {
                $("#download").css("background-color","#FFBB66");
                $('#download').attr("disabled",false);
            }else{
                $("#download").css("background-color","gray");
                $('#download').attr("disabled",true);
            }
        });
    
        function checkNull(){
            var num=0;
            var str="";
            $("input[type$='text']").each(function(n){
                if($(this).val()==""){
                    num++;
                    str+=$(this).attr("placeholder")+"不能为空!\r\n";
                }
            });
            if(num>0){
                alert(str);
                return false;
            }else{
                $.ajax({
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "downloadapp" ,//url
                    data: $('#form1').serialize(),
                    success: function (result) {
                        if (result.status == '1') {
                            window.location.href = "downapp";
                        }else{
                            var prompt = result.msg;
                            promptf(prompt);
                        }
                    }
                });
            }
        }
    
        function promptf(prompt){
            $("#promptvalue").attr("value",prompt);
            $("#prompt").css("display","block");
            setTimeout(function(){
                $("#prompt").css("display","none");
            },2000);
        }
    
        // 发送验证码触发事件
        $('#getCode').click(function() {
            sendyzm($("#getCode"));
        });
    
        function sendyzm(obj){
            var mobile = $('#mobile').val();//手机号码的值
            $.ajax({
                url:"/wap/index/get_sms_code",
                data:{mobile:mobile},
                type: "POST",
                async : false, // 同步
                success: function(data){
                    alert("验证码发送成功");
                },
                error:function(){
                    alert("验证码发送失败");
                }
            });
            setTime(obj);//开始倒计时
        }
    
        // 倒计时处理
        var countdown = 60;
        function setTime(obj) {
            if (countdown == 0) {
                obj.prop('disabled', false);
                obj.text("获取验证码");
                countdown = 60;//60秒过后button上的文字初始化,计时器初始化;
                return;
            } else {
                obj.prop('disabled', true);
                obj.text("("+countdown+"s)后重新发送") ;
                countdown--;
            }
            setTimeout(function() { setTime(obj) },1000) //每1000毫秒执行一次
        }
    </script>
    
    展开全文
  • 实现简单QQ注册页面

    千次阅读 2019-07-22 16:21:36
    今天突发奇想,仿一个QQ注册页面哈哈!! 效果如图: 按钮功能都还没实现,只是一个简单的网页界面! 实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <...

    HTML实现简单QQ注册页面

    今天突发奇想,仿一个QQ注册页面哈哈!!


    效果如图:
    在这里插入图片描述

    按钮功能都还没实现,只是一个简单的网页界面!

    实现代码如下

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>注册界面</title>
    	</head>
    	<body>
    		<img src="img/QQregister.jpg" width="450px" >
    		<div style="float: right;">
    		<p style="font-size: 45px; font-style: oblique: ;";>欢迎注册QQ</p>
    		<p style="font-size: 30px;">每一天,乐在沟通。&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href="" style="font-size: 25px; text-decoration: none;">免费靓号</a></p1></p>
    		<input type="text" name="昵称" id="nickname" value=""  style=" font-size: 18px; color: aqua; width: 320px; height: 35px;" placeholder=" 昵称" />
    		<br /> <br />
    		<input type="password" name="密码" id="password" value="" style="color: aqua; width: 320px; height: 35px; font-size: 18px;" placeholder=" 密码" />
    		<br />	<br />
    		<select  style="width: 120px; height:41px; font-size: 15px;">
    			<option value="">中国+86</option>
    			<option value ="">中国香港特别行政区+852</option>
    			<option value ="">中国澳门特别行政区+853</option>
    			<option value ="">中国台湾地区+886</option>
    		</select>
    			&nbsp;
    			<input style="height: 35px; width: 187px; font-size: 17px;" type="tel" name="手机" id="Tel" value="" placeholder="手机号码" onchange="getCode()"/>
    			<br /><br />
    			<button type="button" id="Register" style="background: 	DodgerBlue; height: 50px; width: 327px;font-size: 20px;" onclick="Register()">立即注册</button>
    			</div>
    	</body>
    	<script type="text/javascript">
    		function getCode(){
    			
    		}
    		function Register(){
    			
    		}
    	</script>
    </html>
    
    
    
    展开全文
  • 文章目录一、目标二、注册页面的实现Ⅰ.实现注册页面跳转Ⅱ.制作注册页面Ⅲ.完善dbHelper类Ⅳ.创建RegisterServletⅤ.效果展示 一、目标 在之前的一篇文章中我们做了登陆界面,并且实现了登陆时与数据库信息的交互...
  • 带选择头像的用户注册页面
  • HTML&CSS实现经典登录注册页面

    万次阅读 多人点赞 2018-10-09 20:43:50
    提要:本篇文章说的是一个简单的登录、注册页面用HTML结合css如何实现,包括两个页面的相互跳转,不包括对输入数据的处理,适合刚入门的新手小白。 1、首先看一下最后的实现效果:首先是一个登录界面,点击“立即...
  • 注册页面demo

    热门讨论 2014-07-27 18:32:56
    注册页面的demo
  • 登录注册页面跳转

    万次阅读 多人点赞 2020-09-02 22:06:23
    注册页面做了一点简单的判断: 伪非空验证: 还有伪密码验证: 红字提示存在两秒,两秒后消失,清除密码框内的内容,但是不清除用户名框内的文本。 然后当用户名和密码输入正确以后(其实两次密码一样就行,用户名...
  • Java实现登录与注册页面

    万次阅读 多人点赞 2019-05-22 09:48:25
    用java实现的登录与注册页面,实现了客户端(浏览器)到服务器(Tomcat)再到后端(servlet程序)数据的交互。 注册的html代码,页面非常丑!!请见谅。。 <body> <fieldset id=""> <legend>注册...
  • jsp设计注册页面

    千次阅读 2019-06-18 09:59:37
    这是页面访问图: 源代码 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <html> <head> <style > <!-- 元素的设计: --> td....
  • 微信小程序设计用户注册页面

    万次阅读 多人点赞 2018-06-21 08:28:36
    * 页面的初始数据 */ data: { text: '获取验证码', //按钮文字 currentTime: 61, //倒计时 disabled: false, //按钮是否禁用 phone: '', //获取到的手机栏中的值 VerificationCode: '', Code: '', N...
  • Java web 登陆注册页面详细步骤

    千次阅读 2019-12-13 08:29:04
    1,创建数据库USER表 2,导入Jar包和Bootstrap框架 ... 4,编写工具类JDBCUtils和...5,编写UserDao数据库登陆,注册方法 private JdbcTemplate template=new JdbcTemplate(JDBCUtils.getDataSource()); //注...
  • 超详细html5登录注册页面总结

    千次阅读 多人点赞 2021-03-28 17:54:25
    写一个注册页面。 重点:method:post,get提交方式 get方式提交:我们可以在url中看到我们提交的信息,不安全,高效 post:比较安全,传输大文件 <html lang="en"> <head> <meta charset="UTF-8"> 表单title> head>...
  • 使用CSS完成用户注册页面

    千次阅读 2018-09-19 15:45:13
    使用CSS完成用户注册页面; 做成这样一个页面; ①设置body的background-image背景图【该背景图是全铺方式,个别网页注册采用指定位置background-position定位背景图在真个页面的位置】; ②分成一个div,分装...
  • 注册页面3.主页(显示个人信息)二、逻辑实现1.localStorage的使用2.功能实现登录注册主页路由配置文件总结 前言 本文主要讲解用vue来实现三个页面之间的跳转以及登录状态的实现,css还在努力学习中,所以界面做的...
  • 用JSP做个简单的登录注册页面

    万次阅读 多人点赞 2020-10-21 23:49:32
    用JSP做个简单的登录注册页面 第一步先分析整个过程,然后得出大概思路。 首先,进入登录页面(login.jsp),如下: 我们是没有账号的所以需要注册账号,所以这时候必须有一个注册页面(register.jsp),如下 紧...
  • HTML5~用户注册页面的设计与实现

    千次阅读 2020-12-03 00:58:15
    用户注册页面的设计与实现 需要制作的效果图如下 大概思路:我们先设置底色灰色,然后写出表单,再利用CSS给表单进行设置。 1、设置底色(css 行内式) <style> body{background:#cccccc;} </style> ...
  • charset=UTF-8" language="java" %> <html> <head> <title>Titletitle> head> <body> 注册页面h1> ()%>/register" method="post"> <input type="text" name="user"><br> <input type="password" name="pwd"><br> ...
  • QQ注册页面

    万次阅读 多人点赞 2018-07-18 11:28:04
    最近复议基础知识,昨天写了一个QQ注册页面 效果图如下   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt;...
  • HTML 简单的前端登录注册页面

    千次阅读 多人点赞 2020-02-02 22:04:12
    刚开始学前端的时候照着视频写了一个比较简单的注册页面,只有html, 还没有用到css。 效果图 (为以防运行失败,加背景的语句不在代码里) <!DOCTYPE html> <html lang="en"> <head> <meta ...
  • html—登录及注册页面设计

    万次阅读 多人点赞 2019-09-25 06:38:53
    height:30px" onclick="window.open('注册页面.HTML')"/> <!--注册--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 个人信息注册 ...
  • 手机注册页面用例设计 1、手机注册页面 2、手机注册页面用例设计分析 (1)功能点总分析 功能点 手机注册页面 输入 处理 ...
  • 经典注册页面jsp注册页面经典jsp注册页面经典jsp注册页面经典jsp注册页面经典
  • 注册页面(CSS)效果图+代码

    千次阅读 2019-07-21 14:52:49
    效果图 代码 <!... 新用户注册 ... <td class="td_right"><input type=... <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"> 已有账号?立即登录</a></p>
  • 登录,注册页面详解

    万次阅读 2019-02-26 12:41:52
    ### 登录,注册页面详解 注册,登录页面非常类似,这里先着重讲登录页面。 登录页面样式: 登录后端实现思路: (我后来实现的时候没有加验证码,请忽略验证码的哪块) 为了让文章更简洁,html代码我不在这里给出,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,095,802
精华内容 438,320
关键字:

注册页面