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

最新推荐文章于 2024-06-16 23:02:16 发布
最新推荐文章于 2024-06-16 23:02:16 发布
阅读量1.8w 收藏 95
点赞数 18
分类专栏： javaweb入门学习记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38064686/article/details/79968850
版权

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="用户名" οnblur="InputUsernameBlur()"></td>
                            <td><label id="errorName"></label></td>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td><input type="password" name="Password" id="InputPassword" placeholder="密码" οnblur="InputPasswordBlur()"></td>
                            <td><label id="errorPassword"></label></td>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td><input type="password" name="Repassword" id="InputRepassword" placeholder="确认密码" οnblur="InputRepasswordBlur()"></td>
                            <td><label id="errorRepassword"></label></td>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td><input type="email" name="E-mail" id="InputEmail" placeholder="电子邮箱" οnblur="InputEmailBlur()"></td>
                            <td><label id="errorEmail"></label></td>
                        </tr>
                    </div>
                    <div class="reg-sub">
                        <input id="submitButton" type="button" οnclick="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;
}

实际页面

潮汐如梦
关注
  • 18
    点赞
  • 踩
  • 95
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端代码+登陆与注册
08-28
前端登陆与注册界面 主要包括账号登陆、扫码登陆、短信验证等功能
Web前端用户注册
09-11
登录，注册是我们使用的较多的表单认证，每个项目都从头开始写，显然是没有必要的。下面和大家分享下我所写的表单验证： 下面的代码，会附上完整代码，使用的过程中，只需要根据自己的项目进行简单的修改即可，非常方便。
【web前端开发网页设计】一步步实现：HTML + CSS + JavaScript 完整注册/登录表单（超实用）轻松搞定注册/登录表单功能：完整源代码与详细教程（新手必看）轻松入门前端开发新手超友好
最新发布
南北极之间
06-16 858
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
web前端中一个注册页面
12-24
自己平时的练习，我是今年才学的web，做的不好，希望大家不要介意，希望对大家有帮助。
前端小白都能看懂的注册页面代码
qq_41039734的博客
06-16 330
<!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...
web前端：注册页面编写
wa0128的博客
12-23 516
【代码】web前端：注册页面编写。
图书管理系统前端代码设计.zip
07-15
《图书管理系统前端代码设计》是针对前端开发人员提供的一套完整的图书管理系统的界面代码实现。这个系统采用纯HTML编写，以黄色为主色调，设计简洁且兼容性良好，无论是独立使用还是整合到Vue等现代前端框架中，都...
注册用户后台系统页面
05-11
综上所述，"注册用户后台系统页面"是一个涵盖前端界面设计、后端逻辑实现、数据安全、用户体验等多个方面的综合项目，对开发人员的技术能力和设计思维都有较高要求。在实际开发中，还需要根据具体业务需求和用户群体...
用户注册页面代码javascript验证
11-06
### 用户注册页面代码JavaScript验证详解 #### 一、引言 在现代Web开发中，前端表单验证是一项非常重要的功能，它可以确保用户提交的数据符合预期的格式和规则，从而提高用户体验并减少后端处理无效数据的可能性。...
NodeJs写的会员管理系统前端页面
04-07
会员管理系统是一种用于管理用户信息的软件系统，通常包括用户注册、登录、信息查询、权限控制、积分管理等功能。在本项目中，前端页面主要负责展示和交互，用户可以通过前端界面完成会员信息的增删改查操作。 ...
CSS前端编写一个注册登录页面
qq_37758122的博客
08-24 1021
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <style> table{ border:1px solid lightgray; } p.blue{ color:blue; } .firstcol{ width:20%; text-align:center; } .secondcol{ width:20%; text-al
html注册页面代码
07-31
html实例，一个简单的注册页面，，，，，，，，，，，，，，，，，，
前端用户登陆注册界面
06-01
前端用户登陆注册界面
web前端——表单注册页面设计（注册信息）
weixin_65997960的博客
03-18 4884
在页面底部插入“电话”、“短信”、“E-Mail”和“返回顶部”4个导航链接，前三个导航链接必须使用相应的超链接伪协议，“返回顶部”链接到页面顶部锚点。另外，需设置链接状态样式，链接字体为蓝色，已访问过为灰色，鼠标经过时为红色，鼠标按下时为黄色。设置用户名、学号和密码为必填项，在输入域后显示红色“*”号，设置用户名输入框默认获得焦点，密码输入框中提示用户“请输入。除用户名、学号、密码、单选按钮、复选框、列表框和文本区之外，其它input元素必须为HTML5新增的输入类型；个选项，默认选择“成都”；
编写一个前端登录注册页面
weixin_35754676的博客
12-17 307
好的，我会尽力为您提供帮助。 在编写前端登录注册页面时，需要考虑以下几个方面： 用户界面设计：需要考虑如何设计页面的布局和风格，使其能够吸引用户的眼球并且易于使用。 数据输入：需要设计输入框和按钮，供用户输入用户名、密码等信息。 数据验证：在用户提交信息之前，需要对输入的数据进行验证，确保其符合要求，比如密码强度足够。 数据处理：当用户提交信息时，需要将其发送到服务器端进行处理，并基于服务...
注册页面代码
HE627386528的博客
03-22 3148
注册页面代码
Web前端-简单注册页面（js）
2302_79643763的博客
06-12 317
注册界面，二次密码验证，提示信息字体颜色，正则校验
【前端】注册页面
人生苦短，我用python
01-27 414
Code： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 头部样式 */
HTML+CSS实现前端注册页
yujiaj的博客
07-01 347
HTML+CSS实现前端注册页 效果图： HTML代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <title&g
利用web前端生成一段网吧管理系统的用户注册代码
09-10
### 回答1： 以下是一个简单的网吧用户注册代码的前端界面，你可以根据需要进行修改和完善。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网吧用户注册</title> <style type="text/css"> body { font-family: Arial, sans-serif; background-color: #f5f5f5; } form { background-color: #fff; padding: 20px; max-width: 600px; margin: 0 auto; box-shadow: 0 0 10px rgba(0,0,0,0.2); } h1 { text-align: center; margin-top: 0; } label { display: block; margin-bottom: 10px; } input[type="text"], input[type="password"] { padding: 5px; width: 100%; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; } input[type="submit"] { background-color: #4CAF50; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; cursor: pointer; margin-top: 10px; } .error-message { color: red; margin-top: 5px; } </style> </head> <body> <form method="post" action="#"> <h1>网吧用户注册</h1> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> <label for="password">密码:</label> <input type="password" id="password" name="password" required> <label for="confirm_password">确认密码:</label> <input type="password" id="confirm_password" name="confirm_password" required> <input type="submit" value="注册"> <div id="error-message" class="error-message"></div> </form> <script type="text/javascript"> // 添加注册表单提交事件监听器 document.querySelector('form').addEventListener('submit', function(event) { // 阻止表单提交默认行为 event.preventDefault(); // 获取表单数据 var username = document.querySelector('#username').value.trim(); var password = document.querySelector('#password').value.trim(); var confirm_password = document.querySelector('#confirm_password').value.trim(); // 验证表单数据 var error_message = ''; if (username.length < 3) { error_message += '用户名长度不能少于3个字符\n'; } if (password.length < 6) { error_message += '密码长度不能少于6个字符\n'; } if (password !== confirm_password) { error_message += '两次输入的密码不一致\n'; } // 如果表单数据验证通过，则提交表单 if (error_message === '') { alert('注册成功！'); this.submit(); } else { document.querySelector('#error-message').textContent = error_message; } }); </script> </body> </html> ``` 你需要将这段代码保存为一个 HTML 文件，并在浏览器中打开它，就可以看到一个简单的网吧用户注册界面了。当用户提交表单时，代码会验证表单数据是否合法，并显示错误信息或者提交表单。你可以根据自己的需要修改和完善这段代码，例如添加更多的输入项、调整样式、添加后端接口等。 ### 回答2： 为了生成一段网吧管理系统的用户注册代码，我们可以使用Web前端技术来实现。 首先，我们需要创建一个HTML页面，包含一个注册表单。可以使用HTML的form元素来创建一个表单，通过设置form的action属性为一个服务器端处理注册请求的URL，将用户提交的注册信息发送到服务器端进行处理。 在表单中需要包含一些输入字段，用于用户输入注册信息。可以使用HTML的input元素来创建输入字段，例如输入用户名的字段可以使用<input type="text">来创建，输入密码的字段可以使用<input type="password">来创建，以此类推。 为了增加注册信息的验证，我们可以使用HTML5的表单验证功能，例如设置input元素的required属性来要求用户必须填写该字段，设置input元素的pattern属性来要求用户输入满足某种格式的值。 接着，我们可以使用JavaScript来增加一些客户端的交互功能。例如，在用户提交表单时，可以通过JavaScript代码获取表单中的数据，进行一些数据处理或验证，然后将数据发送到服务器端进行保存。可以使用JavaScript的fetch或XMLHttpRequest等技术与服务器进行通信。 最后，我们可以通过CSS样式美化页面，使其更加美观和用户友好。可以使用CSS选择器和样式属性来修改表单元素的外观，例如设置背景颜色、字体样式、边框样式等。 总结起来，利用Web前端技术实现网吧管理系统的用户注册代码，需要创建一个包含注册表单的HTML页面，设置表单的action属性指向服务器端处理注册请求的URL，使用输入字段和表单验证功能来获取用户输入的注册信息，通过JavaScript与服务器进行通信，最后使用CSS样式美化页面。 ### 回答3： 在网吧管理系统中，用户注册是一个重要的功能，可以通过Web前端生成一段用户注册代码。以下是一个简单的例子： HTML部分： ``` <!DOCTYPE html> <html> <head> <title>用户注册</title> </head> <body> <h1>用户注册</h1> <form id="registrationForm" action="register.php" method="POST"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required><br> <label for="password">密码:</label> <input type="password" id="password" name="password" required><br> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required><br> <input type="submit" value="注册"> </form> </body> </html> ``` JavaScript部分： ``` // 在页面加载完成后绑定表单提交事件 window.onload = function() { var registrationForm = document.getElementById('registrationForm'); registrationForm.addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交动作 // 获取输入的用户名、密码和邮箱 var username = document.getElementById('username').value; var password = document.getElementById('password').value; var email = document.getElementById('email').value; // 构造用户注册数据 var userData = { username: username, password: password, email: email }; // 发送用户注册请求 fetch('https://api.example.com/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(userData) }).then(function(response) { if (response.ok) { alert('注册成功！'); // 注册成功的提示 } else { alert('注册失败，请稍后再试。'); // 注册失败的提示 } }).catch(function(error) { console.log(error); }); }); }; ``` 上述代码通过HTML和JavaScript实现了一个简单的用户注册表单。用户在输入用户名、密码和邮箱后，点击注册按钮，JavaScript代码将通过fetch函数发送POST请求到服务器的注册接口。服务器接收到数据后进行处理，并根据结果返回不同的响应。如果注册成功，前端会弹出"注册成功！"的提示，否则弹出"注册失败，请稍后再试。"的提示。这段代码可以作为网吧管理系统的基础，方便用户注册并在后台进行数据处理和存储。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值