注册 登录 查看用户名 修改密码 功能案例 参考

最新推荐文章于 2024-07-20 23:54:17 发布
最新推荐文章于 2024-07-20 23:54:17 发布
阅读量975 收藏 4
点赞数
分类专栏： js 文章标签： javascript jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44701385/article/details/123737987
版权

使用js数组完成：
原有用户有2个：
用户一：用户名：zhangsan，密码：123123;
用户二：用户名：wangwu , 密码：111111;
首页：
程序启动时，进入首页，在首页可以选择的操作是：
1：注册
2：登录
1、注册：当容器中存在用户输入的用户名时，或者用户名的长度不再6-15之间时，注册失败
密码需要输入2次最终确定。如果两次输入的密码不一致，或者密码长度不在6-15之间时，注册失败
验证码，当用户名和密码都符合规范时，点击发送验证码，在控制台显示4位数的纯数字验证码，如果验证码输入错的话，注册失败；
当注册成功时，将用户名和密码添加到指定的容器中，
2、登录：只有当用户名和密码和验证码都正确的时候，才显示登录成功
输入用户名和密码判断是否正确，同时验证输入的验证码是否正确，正确则显示登录成功，失败显示登录失败。
3、登录成功之后，在页面显示欢迎你：用户名， 同时可以进行的操作如下
(1) 可以选择查看所有用户信息，显示所有的用户名和密码。++
(2) 修改密码，修改密码前必须验证原密码，输入正确可以进行修改，输入错误则不能进行修改操作。
注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
    用户名：<input id="username"><br>
    密码：<input id="pwd"><br>
    确认密码：<input id="pwd1"><br>
    <button id="register">注册</button>
    <script>
        // 创建两个数组 用来储存用户名密码
        var usernames = ["zhangsan","wangwu"]
        var pwds = ["123123","111111"]

        // 验证用户名能否使用的方法
        $("#register").click(function(){
            var username = $("#username").val();
            var pwd = $("#pwd").val();
            var pwd1 = $("#pwd1").val();

            // 创建新的变量存放用户名和密码的长度以便下面的检查
            var usernamelen = username.length
            var pwdlen = pwd.length

            if(usernamelen >= 6 && usernamelen <= 15 && pwdlen >= 6 && pwdlen <= 15){

                // 获取4位数验证码
                var code = ""
                for(var i = 0; i < 4; i++){
                    var num = Math.random() * 10;
                    num = ("" + num).charAt(0)
                    code += num
                }
                console.log(code)

                // 校验密码
                if(pwd == pwd1){
                    alert("注册成功")
                    // 跳转的时候 把新建的用户名和密码带到登录页面 
                    window.location = "file:///D:/%E6%A1%8C%E9%9D%A2/32--%E7%8E%8B%E6%BD%87%E5%94%AF%20%E8%A1%A5%E5%85%A8%E7%89%88/exam/html/6login.html?username="+username+"&pwd="+pwd
                }
            }else{
                alert('注册失败，用户名或密码的长度不对');
            }

            // 注册完将注册的用户名和密码添加到存放用户名密码的数组里
            usernames.push(username);
            pwds.push(pwd);
            console.log(usernames);
            console.log(pwds);
        })
    </script>
</body>
</html>

登录页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-1.12.4.js"></script>
</head>

<body>
    用户名：<input id="username"><br>
    密码：<input id="pwd"><br>
    确认密码：<input id="pwd1"><br>
    <button id="login">登录</button>

    <button id="find">查看所有用户名和密码</button>

    <button id="changePassword">修改密码</button>
    <script>
        var usernames = ["zhangsan", "wangwu"]
        var pwds = ["123123", "111111"]
        // console.log(usernames)
        // console.log(pwds)

        // 切割前面传输过来的数据
        var url = window.location.href
        // console.log(url)
        var arr = url.split("?");
        // console.log(arr[1])
        var arr1 = arr[1].split("&")
        // console.log(arr1[0])
        // console.log(arr1[1])
        var username1 = arr1[0].split("=")
        var pwd1 = arr1[1].split("=")
        // console.log(username1[1])
        // console.log(pwd1[1])

        // 将得到的用户名密码添加到数组里
        usernames.push(username1[1]);
        pwds.push(pwd1[1]);
        // console.log(usernames)
        // console.log(pwds)

        $("#login").click(function () {
            var username = $("#username").val();
            var pwd = $("#pwd").val();
            var pwds1 = $("#pwd1").val();

            // for in 循环 找一下存放用户名密码的数组里有没有输入的用户名密码
            var index = -1
            var index1 = -1
            for (i in usernames) {
                if (usernames[i] == username) {
                    index = 1
                }
            }
            for (j in pwds) {
                    if (pwds[j] == pwd) {
                        index1 = 1
                    }
                }
            if (index == -1 ) {
                alert("您输入的用户名不存在")
            } else {
                if(index == 1 && index1 == 1 && pwd == pwds1){
                    alert("登录成功，欢迎您："+username)
                }else{
                    alert('密码错误或两次密码输入不一致，登录失败');
                }
            }
        })

        // 查看用户名密码
        $("#find").click(function(){
            console.log(usernames)
            console.log(pwds)
        })

        // 修改密码
        $("#changePassword").click(function(){
            var old1 = prompt("请输入原密码")
            // 用for循环遍历看一下存密码的数组里有没有用户输入的原密码 有就输入新密码 没有就提示错误
            var index3 = -1
            for(var x in pwds){
                if(pwds[x] == old1){
                    index3 = x
                }
            }
            if(index3 == -1){
                alert("原密码错误")
            }else{
                var new1 = prompt("请输入新密码")
                pwds[index3]=new1;
                alert("修改成功，请查看")
            }
        })
    </script>
</body>

</html>
逐渐心动
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
想想MVC-使用JavaBean完成用户登陆，注册和修改密码功能
Dade
11-10 9076
MVCMVC即模型（M），视图<V>，控制器(C)。在Java Web的开发中，我们可以将Jsp文件看作是视图部分，将Servlet部分看作是控制器部分，JavaBean部分看作是模型部分。脑海里有着MVC的概念，在做开发的时候思路就会比较清晰。大的开发走向也变得清晰一些。 JavaBeanJavaBean实际上就是开发者根据需要创建的类，它必须有一个无参的构造方法，对于它的属性要求有对应的封装函数
用户登录、注册、修改密码
sarida的博客
09-03 5427
1、登录时输入账号密码，传入后台进行校验，如果成功则跳转主页面并存入session中，否则给与提示 2、注册：输入手机号码，js校验手机号码，发送验证码，将验证码存入数据库中设定状态为0，如果输入则改为1禁止再次使用，超过1分钟可以将改状态，取消此验证码，输入验证码需要与数据库中的验证码比对，在传输过程中尽量加密传输 3、修改密码：填写手机号，发送验证码时js判断一下，进入后台发送验证码，在输...
字典查询功能实现：登录注册+查询+显示+密码修改+用户注销
03-10
写一个小程序+数据库 1.可以实现登录 2.可以注册 3.可以查询单词 有的话，就显示意思， 4.可以更改密码 5.可以注销用户
JS密码正则验证(不能连续字符（如123、abc）连续3位或3位以上)(不能相同字符（如111、aaa）连续3位或3位以上)
qq_49080170的博客
08-04 2632
JS密码正则验证(不能连续字符（如123、abc）连续3位或3位以上)(不能相同字符（如111、aaa）连续3位或3位以上)
C语言实现的注册登录以及修改账户
三山的博客
03-25 8521
C语言实现的注册登录系统
前端首次登录强制更改密码
xy19950125的博客
12-12 4534
前端第一次登录强制修改密码
js接收用户输入的用户名和密码，若用户名为 “admin” ,且密码为 “123456” ,则提示用户登录成功! 否则，让用户一直输入。
2202_75964420的博客
01-04 2339
js接收用户输入的用户名和密码，若用户名为 “admin” ,且密码为 “123456” ,则提示用户登录成功! 否则，让用户一直输入。
Wpf完美嵌入摄像头案例Demo，支持修改用户名和密码，通过修改SDK代码的方式访问摄像头
02-28
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）应用中完美地嵌入摄像头功能，同时支持修改用户名和密码，并通过修改SDK（Software Development Kit）代码来访问摄像头。这个案例Demo是针对...
SRS.rar_学生注册功能
09-21
在这个特定的案例中，我们关注的是一个名为"SRS.rar_学生注册功能"的项目，它是在5.0版本以前的环境编译的，主要用于实现学生的注册、选课以及成绩查询等功能，并且能够展示所有的教授信息，具有较为完善的功能。...
Axure8原型设计实战案例：如何实现登录功能和用户管理？8年专业产品经理设计分享
01-08
登录功能设计，是每位产品设计师必经之路，很好的学习和参考资料，作者原创不易。如果感觉不错，就点赞，评论和收藏三连发，让更多的人看到这篇原创之作。 一、产品需求 登录功能：使用vue做个用户管理（用户字段：...
jsp 登录注册 修改密码
12-26
jsp mvc模式的用户注册登录修改密码，JavaScript验证的。
ssm整合案例 登录注册增删改查
06-20
`tbl_user`表通常包含用户ID、用户名、密码、邮箱、角色等字段，用于存储登录和注册信息。而`tbl_student`表可能包含学生ID、姓名、年龄、班级等字段，用于实现主页面的增删改查功能。在SSM整合中，MyBatis的Mapper...
【Android】用户登录注册界面开发及用户信息管理案例代码详解
08-03
本案例将详细解析如何实现这些功能，包括用户登录、注册、注销、记住密码以及修改密码等关键环节。 首先，我们需要创建用户界面（UI）。在Android Studio中，通常会使用XML布局文件来设计登录和注册页面。登录界面...
Java操作集合类实现对多个用户信息的操作
weixin_45528773的博客
05-23 600
Java操作集合类，创建姓名本和密码本，实现对多个用户信息的操作。
PHP+MYSQL的使用（登录+注册+增删改查）第一部分（sql）
qq_37805832的博客
04-13 982
创建两个表，第一为用户表，第二为所注册登录用户的items create table users( id int(10) unsigned not null auto_INCREMENT KEY, username varchar(16) not null, password varchar(40) not null )charset=utf8; create table items( id in...
javascript完成一个简单的修改密码验证
ml_YSY的博客
12-25 2113
代码 // 更改密码时的两次密码验证是否一致。 var pwd,pwdAgain; while(pwd != 123456){ pwd = prompt("请输入密码:"); while(pwd == 123456){ pwdAgain = prompt("请再次输入密码:");...
修改密码的操作
Li13610030857的博客
03-20 2545
首先我们要写一个button标签，通过鼠标点击这个button标签来触发修改密码的模态框。 修改密码的模态框的具体代码如下图所示： 展示模态框在页面的效果： 接下来到了JavaScript部分的代码。 下面的代码是在你使用鼠标点击button标签时执行下面的方法，从而弹出修改密码的模态框。 下面的代码是向控制器发送请求，将获取到的数据发送到控制器那边， 然后等控制器那边完成数据库中修改的操作后，接收控制器传回的信息，然后显示在页面中。 ...
Java实现添加用户（注册功能）、查找用户（登录功能）、修改用户（重置密码）实验代码
m0_58736001的博客
05-14 2092
2. 定义接口: 用户操作接口（IUserDao）包含添加用户（注册功能）、查找用户（登录功能）、用户（重置密码）三 种抽象方法。3. 定义实现接口类：UserDaoImpl, 重写三个抽象方法，其中的登录功能可以参考实验五来完成。(1)添加main方法，定义ArrayList集合对象，实现添加3个学生的信息并存储在集合对象里。1. 定义用户类的JavaBean：User（用户名、密码、生日）(2)ArrayList集合元素采用增强型for实现遍历。List集合元素采用迭代器遍历。
Next.js静态导出与动态路由优化
最新发布
天涯学馆
07-20 1053
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
vue用户登录注册案例
05-31
好的，下面我将为您提供一个基于Vue的用户登录和注册的案例代码，供参考： 1. 创建一个名为`Login.vue`的登录组件，并设置登录表单： ``` <template> <div> <h2>用户登录</h2> <form> <div> <label>用户名:</label> <input type="text" v-model="username" placeholder="请输入用户名"> </div> <div> <label>密码:</label> <input type="password" v-model="password" placeholder="请输入密码"> </div> <button @click.prevent="login">登录</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { login() { // 发送登录请求 axios.post('/api/login', { username: this.username, password: this.password }).then(response => { // 登录成功 this.$store.commit('login', response.data) this.$router.push('/') }).catch(error => { // 登录失败 console.log(error) }) } } } </script> ``` 2. 创建一个名为`Register.vue`的注册组件，并设置注册表单： ``` <template> <div> <h2>用户注册</h2> <form> <div> <label>用户名:</label> <input type="text" v-model="username" placeholder="请输入用户名"> </div> <div> <label>密码:</label> <input type="password" v-model="password" placeholder="请输入密码"> </div> <button @click.prevent="register">注册</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { register() { // 发送注册请求 axios.post('/api/register', { username: this.username, password: this.password }).then(response => { // 注册成功 this.$router.push('/login') }).catch(error => { // 注册失败 console.log(error) }) } } } </script> ``` 3. 在`main.js`文件中配置路由和Vuex： ``` import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' import Vuex from 'vuex' import Login from './components/Login.vue' import Register from './components/Register.vue' Vue.use(VueRouter) Vue.use(Vuex) const router = new VueRouter({ routes: [ { path: '/login', component: Login }, { path: '/register', component: Register } ] }) const store = new Vuex.Store({ state: { user: null }, mutations: { login(state, user) { state.user = user } } }) new Vue({ el: '#app', router, store, render: h => h(App) }) ``` 4. 在后端服务器上设置API路由，并处理登录和注册请求： ``` const express = require('express') const bodyParser = require('body-parser') const app = express() app.use(bodyParser.json()) const users = [] app.post('/api/login', (req, res) => { const user = users.find(u => u.username === req.body.username && u.password === req.body.password) if (user) { res.json(user) } else { res.status(401).send('用户名或密码不正确') } }) app.post('/api/register', (req, res) => { const user = users.find(u => u.username === req.body.username) if (user) { res.status(409).send('用户名已存在') } else { users.push(req.body) res.sendStatus(201) } }) app.listen(3000, () => { console.log('服务器已启动') }) ``` 以上是一个简单的Vue用户登录和注册的案例，您可以根据自己的实际需求进行修改和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值