用户系统|前端注册页面|代码

原创 2018年04月17日 00:27:29

regist.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%@ page  import="com.servlet.UserServlet" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册页面</title>
    <link href="css/regist.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 注册页面左图 -->
        <div class="left"></div>
        <!-- 注册栏 -->
        <div class="right">
            <div class="reg-label">
                <label>用 户 注 册</label>
                <hr>
            </div>
            <div class="reg-box">
                <form action="<%=request.getContextPath()%>/servlet/UserServlet" id="formId" class="reg-form" method="POST">
                    <div>
                        <tr>
                            <td><input type="text" name="Username" id="InputUsername" placeholder="用户名" onblur="InputUsernameBlur()"></td>
                            <td><label id="errorName"></label></td>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td><input type="password" name="Password" id="InputPassword" placeholder="密码" onblur="InputPasswordBlur()"></td>
                            <td><label id="errorPassword"></label></td>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td><input type="password" name="Repassword" id="InputRepassword" placeholder="确认密码" onblur="InputRepasswordBlur()"></td>
                            <td><label id="errorRepassword"></label></td>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td><input type="email" name="E-mail" id="InputEmail" placeholder="电子邮箱" onblur="InputEmailBlur()"></td>
                            <td><label id="errorEmail"></label></td>
                        </tr>
                    </div>
                    <div class="reg-sub">
                        <input id="submitButton" type="button" onclick="checkForm()" value="免费注册">
                    </div>
                </form>
            </div>
        </div>
        <div class="bottom">
            <label>© 吉林大学珠海学院 计算机学院 | 软件工程 04161408</label>
        </div>
    </div>
    <!-- regist.js -->
    <script type="text/javascript" charset="UTF-8" src="js/regist.js"></script>
</body>
</html>

regist.css

* {
    margin: 0;
    padding: 0;
}
.container {
    width: 1000px;
    height: 600px;
    margin: 25px auto;
    background: #4c4c4c;
}
.left {
    width: 60%;
    height: 80%;
    display: block;
    float: left;
    margin-top: 60px;
    background-image: url("./../../imgs/regist.jpg"); /*记得路径要这样写*/
}
.right {
    width: 40%;
    height: 80%;
    display: block;
    float: right;
    margin-top: 60px;
    background: #f3f9f1;
}
.reg-label {
    width: 400px;
    height: 50px;
    text-align: center;
}
.reg-label label {
    width: 400px;
    height: 50px;
    line-height: 50px;
    font-size: 24px;
    color: #4c4c4c;
}
.reg-box {
    width: 400px;
    height: 430px;
}
.reg-form {
    width: 400px;
    height: 320px;
}
.reg-form input {
    width: 60%;
    margin: 20px;
    padding: 10px;
    float: left;
    background-color: transparent;
    border: none;
    font-size: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
    outline: none;
    color: #4c4c4c;
}
.reg-form div {
    height: 80px;
}
.reg-sub {
    width: 400px;
    height: 70px;
}
.reg-sub input {
    width: 54%;
    margin: 20px 88px;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 100;
    background: transparent;
    color: #4c4c4c;
    border: 1px solid rgba(0, 0, 0, 0.42);
    border-width: thin;
    cursor: pointer;
    outline: none;
    -webkit-transition: 0.5s all;
    text-decoration: none;
}
.bottom {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.bottom label {
    color: rgba(255, 255, 255, 0.56);
    font-size: 13px;
}
.reg-form label {
    font-size: 12px;
    line-height: 78px;
    color: #ff461f;
}

regist.js

/**
 * 表单提交时验证
 * @returns {boolean}
 */
function checkForm() {

    var Form = document.getElementById("formId");
    var bool = true;
    if (!InputUsernameBlur()) bool = false;
    if (!InputPasswordBlur()) bool = false;
    if (!InputRepasswordBlur()) bool = false;
    if (!InputEmailBlur()) bool = false;
    if (bool==true) {
        Form.submit();
    }
    return bool;

}

/**
 * 用户名输入框失去焦点
 */
function InputUsernameBlur() {
    var uname = document.getElementById("InputUsername");
    var ename = document.getElementById("errorName");
    /* 用户名为空/不为空 */
    if (uname.value=="") {
        ename.innerHTML="用户名不能为空。";
        return false;
    }
    else {
        ename.innerHTML="";
    }
    /* 密码长度 */
    if (uname.value.length<4 || uname.value.length>16) {
        ename.innerHTML="长度为4-16。";
        return false;
    }
    else {
        ename.innerHTML="";
    }
    return true;
}

/**
 * 密码输入框失去焦点
 */
function InputPasswordBlur() {
    var pwd = document.getElementById("InputPassword");
    var epwd = document.getElementById("errorPassword");
    /* 密码为空/不为空 */
    if (pwd.value=="") {
        epwd.innerHTML="密码不为空。"
        return false;
    }
    else {
        epwd.innerHTML="";
    }
    /* 密码长度 */
    if (pwd.value.length<6 || pwd.value.length>16) {
        epwd.innerHTML="长度为6-16。"
        return false;
    }
    else {
        epwd.innerHTML="";
    }
    return true;
}

/**
 * 邮箱输入框失去焦点
 */
function InputEmailBlur() {
    var email = document.getElementById("InputEmail");
    var eemail = document.getElementById("errorEmail");
    /* 邮箱不为空 */
    if (email.value=="") {
        eemail.innerHTML="邮箱不为空。"
        return false;
    }
    else {
        eemail.innerHTML="";
    }
    /* 邮箱格式验证 */
    var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
    if (reg.test(email.value)==false) {
        eemail.innerHTML="邮箱格式错误。";
        return false;
    }
    else {
        eemail.innerHTML="";
    }
    return true;
}

/**
 * 确认密码输入框失去焦点
 */
function InputRepasswordBlur() {
    var rpwd = document.getElementById("InputRepassword");
    var erpwd = document.getElementById("errorRepassword");
    /* 确认密码不为空 */
    if (rpwd.value=="") {
        erpwd.innerHTML="确认密码不为空。"
        return false;
    }
    else {
        erpwd.innerHTML="";
    }
    /* 确认密码与密码不一致 */
    var pwd = document.getElementById("InputPassword");
    if (pwd.value != rpwd.value) {
        erpwd.innerHTML="密码不一致。"
        return false;
    }
    else {
        erpwd.innerHTML="";
    }
    return true;
}

实际页面

web前端如何做注册页面

1.首先,设计整个页面: 此界面的代码段落:(前端代码)                                                                ...
  • yuan520shui
  • yuan520shui
  • 2017-04-07 16:41:47
  • 2056

前端实战之登陆注册页

这是我自己仿照简书的板式用bootstrap写的一个登陆注册页面,由于是新手,估计有的方法用的很不恰当,请大家不吝赐教。 废话不多说了,直接上代码 - HTML部分 ...
  • a0100034930
  • a0100034930
  • 2015-01-03 23:47:42
  • 2507

JS学习之前端简单注册页面

b.html页面内容 登陆成功页面 登陆成功!!
  • qq_35354855
  • qq_35354855
  • 2017-11-04 17:37:55
  • 249

前端注册验证模板

注册验证                     function validatePassword() {             var passElement=document....
  • pangqiandou
  • pangqiandou
  • 2017-10-16 23:07:39
  • 772

关于原生js前端注册页面的相关验证

html PUBLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transit...
  • fasslook
  • fasslook
  • 2016-06-09 16:00:43
  • 912

WEB基本网页<em>代码</em>(含登录、<em>注册</em>、信息维护等)

web<em>前端</em>如何做<em>注册页面</em> JavaScript、CSS、HTML 实现用户<em>注册页面</em>与信息校验 【Web】HTML 账号<em>注册页面</em> WEB基本网页<em>代码</em>(含登录、注册、信息维护等) 立即下载 上...
  • 2018年04月18日 00:00

JavaScript 注册登录页面的简单实现

九月的开学至今,将近一个月的时间来学习JavaScript,如今花了一个星期的课余时间做了一个网站的注册登录页面的简单实现,在此记录一番。 1.基础知识的汲取。 对于学习新的知识,本人喜欢以书籍的...
  • Leafage_M
  • Leafage_M
  • 2016-10-17 17:50:55
  • 19693

html网页添加<em>注册</em>与登陆<em>代码</em>

html网页添加注册与登陆<em>代码</em>实现登录注册的数据库连接和简单的登录注册设计... html网页添加注册与登陆<em>代码</em>实现登录注册的...web<em>前端</em>如何做<em>注册页面</em> javaweb简单的登录...
  • 2018年04月17日 00:00

前端:登录页面

前端:登录页面效果:代码:login.html 登录
  • u012995856
  • u012995856
  • 2017-05-04 23:04:40
  • 1200
收藏助手
不良信息举报
您举报文章:用户系统|前端注册页面|代码
举报原因:
原因补充:

(最多只允许输入30个字)