javascript基础之小练习登录注册界面

  //将字符串的左右空格去掉

        function mytrim(str) {

            //如果str为null,undefined直接返回一个空的字符串

            if (!str) {

                return ''

            }

            //反之则将字符串的左右空格去掉

            else {

                return str.trim()

            }

        }

        let game = {

            //敏感词组

            sensitiveWord: ['CNM', 'QNM', 'NMSL'],

            //使用数据模拟用户数据库

            userlist: [],

            //登录界面

            showloginpage() {

                console.log('欢迎登录');

                let username;

                let password;

                let usernameisok;

                let passwordisok;

                do {

                    username = prompt('请输入用户名')

                    if (!username) {

                        usernameisok = false

                        console.log('用户名不能为空');

                    } else {

                        usernameisok = true

                    }

                } while (!usernameisok);

                do {

                    password = prompt('请输入密码')

                    if (!password) {

                        passwordisok = false

                        console.log('密码不能为空');

                    } else if (password.length < 6) {

                        passwordaginisok = false

                        console.log('密码至少大于6位');

                    } else {

                        passwordisok = true

                    }

                } while (!passwordisok);

                //拿用户输入的用户名和密码,判断是否存在

                let user = this.userlist.find(function (item) {

                    return item.username === username

                })

                if (!user) {

                    console.log('用户名不存在');

                    this.showloginpage()

                } else {

                    if (user.password !== password) {

                        console.log('密码错误');

                        this.showloginpage()

                    } else {

                        console.log('login success');

                        this.showmainpage()

                    }

                }

            },

            //游戏登录成功的界面

            showmainpage() {

                console.log('这里是游戏主界面');

            },

            //注册界面

            showregistpage() {

                //定义状态,代表用户名和密码验证是否通过

                //在外面定义,便于后续的使用

                let username;

                let usernameisok;

                let passwordisok;

                let passwordagin;

                let password;

                let passwordaginisok;

                console.log('欢迎注册');

                //因为场景需要先执行在对其进行判断,所以采用do-while

                do {

                    username = mytrim(prompt('请输入用户名:'))

                    //如果去完空格是空字符串,则提示,设置验证为不通过

                    if (!username) {

                        usernameisok = false

                        console.log('用户名不能为空');

                    } else {

                        //通过some方法检查用户名是否包含敏感词,

                        let isSensitive = this.sensitiveWord.some(function (item) {

                            //统一设置为大写再比对,以此忽略大小写

                            return username.toUpperCase().includes(item.toUpperCase())

                        })

                        if (isSensitive) {

                            usernameIsOk = false

                            console.log('用户名不合法');

                        } else {

                            //判断用户数组中是否已存在同样的用户名

                            let isRepeat = this.userlist.some(function (item) {

                                return item.username === username

                            })

                            if (isRepeat) {

                                usernameisok = false

                                console.log('用户名已存在');

                            } else {

                                usernameisok = true

                            }

                        }

                    }

                } while (!usernameisok); //不管是因为什么而验证不通过,就继续循环要求重新输入

                do {

                    password = prompt('请输入密码')

                    password = mytrim(password)

                    if (!password) {

                        passwordisok = false

                        console.log('密码不能为空');

                    } else if (password.length < 6) {

                        passwordisok = false

                        console.log('密码至少大于6位');

                    } else {

                        passwordisok = true

                    }

                } while (!passwordisok);

                do {

                    passwordagin = prompt('请再次输入密码')

                    passwordagin = mytrim(passwordagin)

                    if (password !== passwordagin) {

                        passwordaginisok = false

                        console.log('两次密码输入不一致');

                    } else {

                        passwordaginisok = true

                    }

                } while (!passwordaginisok);

                this.userlist.push({

                    username,

                    password

                })

                console.log(username, password);

                console.log('当前用户:', this.userlist);

                this.showWelcomePage()

            },

            //欢迎界面

            showWelcomePage() {

                let type = prompt('欢迎来到宠物世界,请选择操作:1. 登录  2. 注册  3.退出')

                switch (type) {

                    case '1':

                        this.showloginpage()

                        break;

                    case '2':

                        this.showregistpage()

                        break;

                    case '3':

                        console.log('退出');

                        break;

                    default:

                        console.log('输入有误,请重新输入');

                        this.showWelcomePage()

                        break;

                }

            }

        }

        game.showWelcomePage()

效果图如下图所示:


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容