HTML5本地数据库来做注册登录功能

创建时间：2017-07-30 投稿人：浏览次数：2552

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        用户名：<input type="text" name="" id="" value="" /> 密码：
        <input type="password" name="" id="" value="" />
        <input type="button" name="" id="btn" value="注册" />
        <button type="button" id="clear">清除数据</button>
    </body>
    <script type="text/javascript">
        var aInputs = document.getElementsByTagName("input");
        var oClear = document.getElementById("clear");
        var db = openDatabase("zuchedenglu", "1.0", "textdb", "1024*1024");
        db.transaction(function(contex) {
            contex.executeSql("create table if not exists userinf(id unique,name,password)");
        });
        var oBtn = document.getElementById("btn");
        var num = 0;
        oBtn.onclick = function() {
            if (aInputs[0].value && aInputs[1].value) {
                db.transaction(function(contex) {
                    contex.executeSql("select * from userinf", [], function(con, data) {
                        var leg = data.rows.length,
                            i;
                        for (var i = 0; i < leg; i++) {
                            if (aInputs[0].value == data.rows.item(i).name) {
                                alert("该用户名已注册！");
                                return;
                            }
                        }
                        num =leg +1;
                    });
                    contex.executeSql("insert into userinf(id,name,password) values("" + num + "","" + aInputs[0].value + "","" + aInputs[1].value + "")");
                    alert("注册成功");
                });
            } else {
                alert("请填写完整的账号密码！");
            }
        }
        oClear.onclick=function(){
            db.transaction(function(contex) {
                contex.executeSql("drop table userinf");
            });
        }
    </script>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        用户名：<input type="text" name="" id="" value="" /> 密码：
        <input type="password" name="" id="" value="" />
        <input type="button" name="" id="btn" value="登陆" />
        <button type="button" id="clear">清除数据</button>
    </body>
    <script type="text/javascript">
        var aInputs = document.getElementsByTagName("input");
        var oClear = document.getElementById("clear");
        var db = openDatabase("zuchedenglu", "1.0", "textdb", "1024*1024");
        db.transaction(function(contex) {
            //  tx.executeSql("drop table userinf");
            //contex.executeSql("create table if not exists userinf(id unique,name,password)");
            contex.executeSql("create table if not exists userinf(id integer primary key AutoIncrement,name,password)");
        });
        var oBtn = document.getElementById("btn");
        var blogin = true;
        oBtn.onclick = function() {
            if (aInputs[0].value && aInputs[1].value) {
                db.transaction(function(contex) {
                    contex.executeSql("select * from userinf", [], function(con, data) {
                        var leg = data.rows.length,
                            i;
                        for (var i = 0; i < leg; i++) {
                            if (aInputs[0].value == data.rows.item(i).name && aInputs[1].value == data.rows.item(i).password) {
                                blogin = false;
                                break;
                            }
                        }
                        if (blogin) {
                            alert("请输入正确的账号和密码！");
                        } else {
                            alert("登陆成功！");
                        }
                    });
                });
            } else {
                alert("请填写完整的账号密码！");
            }
        }
        oClear.onclick = function() {
            db.transaction(function(contex) {
                contex.executeSql("drop table userinf");
            });
        }
    </script>

</html>

声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。

热门文章: CTF writeup 2_南邮网络攻防训...; SSM框架——详细整合教程（...; Linux Shell脚本编程－－curl命...; HttpClient使用详解; Java面试题全集（上）; JAVA设计模式之单例模式; java.lang.OutOfMemoryError: PermGen ...; TCP协议中的三次握手和四次...; form表单的两种提交方式，su...; String,StringBuffer与StringBuilder...

最新文章: Java之品优购课程讲义_day20（7）; 剑指 Offer - 8：跳台阶; Netty权威指南_札记02_NIO编程; mysql时间属性之时间戳和datetime之...; 虚拟现实或许可以拯救古埃及的“...; spring cloud服务注册中心eureka---集群...; Java SE 第六章; HTTP请求+数据库; HIDL学习笔记之HIDL C++（第二天）; ubuntu系统下指定tomcat运行时为JDK1.8...