js怎么实现多用户注册登录界面

JavaScript021

js怎么实现多用户注册登录界面,第1张

我是这么认为的!js和html只能做客户端的事情,如界面元素布局,表单验证这类的事情。如果只是要这样一个表单,那就太简单了。致于登录验证这样的事,需要后台支持的,数据可能来自数据库,只用js和html是完成不了的。

/**

* 显示一个弹出界面

*

* @param url

*界面地址,可以使jsp,页也可以是action

* @param params

*需要传递的参数

* @param titleDesc

*页面头描述

* @param width

*页面宽度

* @param height

*页面高度

* @param parentView

*页面所在的父页面

* @param callback

注册页面代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>注册</title>

</head>

<body>

<form method="post" onsubmit="return false" id="form">

    <input type="text" name="username" placeholder="用户名"><br>

    <input type="password" name="password" placeholder="密码"><br>

    <input type="password" name="rePassword" placeholder="再次输入密码"><br>

    <input type="submit" onclick="register_user()" value="注册"><br>

</form>

<a href="login.html">去登录</a>

<script>

    var localDB = openDatabase('localDB', '1.0', 'Test DB', 2 * 1024 * 1024)

    localDB.transaction(function (ts) {

        ts.executeSql('CREATE TABLE IF NOT EXISTS user(username,password)')

    })

    function register_user() {

        var username = document.getElementsByTagName("input")[0].value

        var password = document.getElementsByTagName("input")[1].value

        var rePassword = document.getElementsByTagName("input")[2].value

        if(password != rePassword)

        {

            alert("两次输入的密码不同,请重新输入")

        }else

 {

            localDB.transaction(function(ts){

                ts.executeSql("INSERT INTO user (username,password) VALUES ('"+username+"','"+password+"')")

                alert("注册成功")

            })

        }

    }

</script>

</body>

</html>

登录页面代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>登录</title>

</head>

<body>

<form onsubmit="return false" method="post">

    <input type="text" placeholder="用户名"><br>

    <input type="password" placeholder="密码"><br>

    <input type="submit" value="登录" onclick="login()"><br>

</form>

<a href="register.html">去注册</a>

<script>

    var localDB = openDatabase('localDB', '1.0', 'Test DB', 2 * 1024 * 1024)

    localDB.transaction(function (ts) {

        ts.executeSql("SELECT * FROM user",[],function (tx, results) {

            var len = results.rows.length

            if(len<=0)

            {

                localDB.transaction(function (ts) {

                    ts.executeSql('CREATE TABLE IF NOT EXISTS user(username,password)')

                })

            }

        })

    })

    function login() {

        var username = document.getElementsByTagName("input")[0].value

        var password = document.getElementsByTagName("input")[1].value

        localDB.transaction(function (ts) {

            ts.executeSql("SELECT * FROM user WHERE username='"+username+"'",[],function (ts, res) {

                if(res.rows.length<=0)

                {

                    alert("登录失败,用户未注册")

                }else if (password == res.rows[0].password)

                {

                    alert("登录成功,三秒后跳转到百度")

                    setInterval(function () {

                        location.href = "https://www.baidu.com"

                    },3000)

                }else

 {

                    alert("登录失败,密码错误")

                }

            })

        })

    }

</script>

</body>

</html>

以上代码使用了WEB SQL,还请选择合适的浏览器查看。

function Check()

{

if(document.getElementById("帐号id").value=="")

{

alert("登录名不能为空!")

return false

}

if(document.getElementById("第一次密码id").value!=document.getElementById("第二次密码id").value)

{

alert("两次输入密码不一样!")

return false

}

}

在你的注册按钮调用上面方法就行了