赞
踩
效果:完成用户注册及登录,并实现基础持久登录方法
页面部分:
- <div style = "text-align: center;">
- <div style="font-size: 14px; color: #006eff; margin-bottom: 30px; margin-top: 10px;">
- 即日起所有用户均需登录,请自行注册账号,推荐使用邮箱前缀
- </div>
- <div id = "Login" class="login_container">
- <h2>登录</h2>
- <form id="loginForm" onsubmit="submitForm(event)">
- <div class="form-group">
- <label for="username">账号:</label>
- <input type="text" id="username" name="username" required>
- </div>
- <div class="form-group">
- <label for="password">密码:</label>
- <input type="password" id="password" name="password" required>
- </div>
- <div class="form-group">
- <button type="button" onclick="showRegister()" class="left-button">注册</button>
- <button type="submit" class="right-button">登录</button>
- </div>
- </form>
- </div>
-
- <div id="register" class="login_container" style="display: none;">
- <h2>注册</h2>
- <form id="registerForm" onsubmit="registerForm(event)">
- <div class="form-group">
- <label for="username">账号:</label>
- <span class="error-message">请使用邮箱前缀注册</span>
- <input type="text" id="registerUsername" name="username" required>
- </div>
- <div class="form-group">
- <label for="password">密码:</label>
- <input type="password" id="registerPassword" name="password" required>
- </div>
- <div class="form-group">
- <label for="confirm_password">确认密码:</label>
- <span id="passwordError" class="error-message"></span>
- <input type="password" id="confirmPassword" name="confirm_password" required>
- </div>
- <div class="form-group">
- <button type="button" onclick="showLogin()" class="left-button">返回登录</button>
- <button type="submit" class="right-button">注册</button>
- </div>
- </form>
- </div>
- </div>
JS部分:利用localStorage进行基础信息存储,此处可以加入更多的逻辑,来实现复杂的验签方式。
- <script>
- var value = {};
- this.scope.action = function() { return value; }
- devices_list = {};
- (function(scope) {
- scope.$watch('msg', function(msg) {
- dashboard_toolbar_init()
- if (msg) {
- switch (msg.type) {
- case 'user_exsit':
- alert('账号已存在')
- msg.type = ''
- break;
- case 'user_success':
- alert('注册成功')
- msg.type = ''
- break;
- case 'login_err':
- alert("账号/密码错误");
- msg.type = ''
- break;
- case 'login_success':
- show_login_info(msg.username)
- msg.type = ''
- break;
- default:
- break;
- }
- }
- });
- })(scope);
-
- function dashboard_toolbar_init() {
- /* 自己想显示的toolbar设计 */
- }
- function usr_exit() {
- var isLoggedIn = localStorage.getItem('isLoggedIn');
- var usrname = localStorage.getItem('usrname');
-
- if ((isLoggedIn == null) || (isLoggedIn == 'false') || (usrname == null)) {
- return;
- }
- if(confirm("是否确认退出")){
- var login_btn = document.getElementById('login_btn');
- login_btn.innerHTML = '未登录'
-
- localStorage.setItem('isLoggedIn', false);
- localStorage.setItem('usrname', '');
-
- value.type = "Login"
- value.data = 'null';
- document.getElementById("save_pb").click();
- }
- }
-
- function show_login_info(username) {
- var login_btn = document.getElementById('login_btn');
- login_btn.innerHTML = username + ' | 退出'
- localStorage.setItem('isLoggedIn', true);
- localStorage.setItem('usrname', username);
-
- value.type = "go_others"
- value.data = '首页';
- document.getElementById("save_pb").click();
- }
- function submitForm(event) {
- event.preventDefault();
- var username = document.getElementById("username").value;
- var password = document.getElementById("password").value;
- var login_btn = document.getElementById('login_btn');
-
- value.type = "submitForm"
- value.data = {}
- value.data.usrname = username
- value.data.psswd = password
- document.getElementById("save_pb").click();
- }
-
- function showRegister() {
- document.getElementById("Login").style.display = "none";
- document.getElementById("register").style.display = "inline-block";
- }
-
- function showLogin() {
- document.getElementById("register").style.display = "none";
- document.getElementById("Login").style.display = "inline-block";
- }
-
- function registerForm(event) {
- event.preventDefault();
- var username = document.getElementById("registerUsername").value;
- var password = document.getElementById("registerPassword").value;
- var confirmPassword = document.getElementById("confirmPassword").value;
-
- if (password !== confirmPassword) {
- document.getElementById("passwordError").textContent = "密码不一致";
- return;
- } else {
- document.getElementById("passwordError").textContent = "";
- value.type = "registerForm"
- value.data = {}
- value.data.usrname = username
- value.data.psswd = password
- document.getElementById("save_pb").click();
- }
- }
- </script>
在其他页面可对登录用户及状态进行检查,未登录则跳转到Login页面,登录则显示用户名
- function check_usr_login_status() {
- var isLoggedIn = localStorage.getItem('isLoggedIn');
- var usrname = localStorage.getItem('usrname');
-
- if ((isLoggedIn == null) || (isLoggedIn == 'false') || (usrname == null)) {
- value = {}
- value.type = "Login"
- value.data = 'null';
- document.getElementById("save_pb").click();
- } else {
- /*set toolbar name*/
- g_login_usrname = usrname
- }
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。