Question

你能告诉我如何让用户在表格上输入他们的数据（电子邮件和密码），当他们选择注册时（＆＃34; Registar＆＃34;），数据存储在可变的变量上如果用户决定点击＆＃34; Entrar＆＃34;，则立即使用，这样他们就可以不使用默认信息进入。

这是一项针对学校的工作，我不能使用数据库，只能使用Javascript和JQuery。

这是我到目前为止所得到的（它是我正在制作的网站的部分副本）。

顺便说一句：按钮上的ID用于CSS和额外的东西，也没有用于样式化页面。

＆＃13;

<script type="text/javascript">
        var newuser;
        var newpassword;

        function registoTXT() {
            newuser = document.getElementById('inputUser').value;
            newpassword = document.getElementById('inputPassword').value;
            alert("Utilizador Registado!");
        }

        function check(form) {
            if ((form.usermail.value == "sparedes@isec.pt" && form.password.value == "12345678") || (form.username.value == newuser.value && form.password.value == newpassword.value)) {
                window.open('VIPZone.html', "_self")
            } else {
                alert("E-mail ou Password Inválido(s)!")
            }
        }
    </script>

＆＃13;

<div class="contents">
        <h2>Login</h2>
        <blockquote>
            <form name="login">
                <div class="divTableBody">
                    <div class="divTable">
                        <div class="conteudoLogin">
                            <div class="divTableRow">
                                <div class="divTableCell">
                                    <label><b>E-mail</b></label>
                                </div>
                                <div class="divTableCell">
                                    <input id="inputUser" type="email" name="usermail" placeholder="Endereço@email.com" required>
                                </div>
                            </div>
                            <div class="divTableRow">
                                <div class="divTableCell">
                                    <label><b>Password</b></label>
                                </div>
                                <div class="divTableCell">
                                    <input id="inputPassword" type="password" name="password" placeholder="Password" required>
                                </div>
                            </div>
                            <br>
                            <div class="divTableRow">
                                <div class="divTableCell">
                                    <button id="botaologin" onclick="check(this.form)" type="button">Entrar</button> &nbsp;
                                    <button id="botaologin" onclick="registoTXT()" type="button">Registar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </blockquote>
    </div>

＆＃13;

Answer 1

这里有一些事情发生。

首先，不要多次使用ID。如果元素重复并且您想要设置样式，则使用类。如果你愿意的话，没有什么可以阻止你使用id来识别它。始终喜欢CSS Star Wars CSS Specificity

的解释

例如：

<p class="my-class" id="my-id">Only one ID!</p>

第二次，除非出于某种奇怪的原因，否则不要使用onclick。您可以使用vanilla js或jQuery

将事件侦听器附加到元素

香草：

document.addEventListener('DOMContentLoaded', function(){
    document.getElementById('botaologin').addEventListener('click',function(){
        // do stuff here
    });
});

的jQuery

$(document).ready(function(){
    $('#botaologin').click(function(){
        // do stuff here
    });
});

第三次，对于解决您的实际问题而道歉。

这里有几个选项。

您可以存储为全局
您可以存储在本地范围
您可以存储在localstorage
您可以存储在Cookie中

1）这是一种不好的做法，你应该将这种东西包装在一个对象中，但这里是快速而又脏的版本

            var myGlobal = null;

            document.addEventListener('DOMContentLoaded', function(){

                document.getElementById('set-global').addEventListener('click', function(){
                    myGlobal = "I'm a global!";
                    alert(myGlobal);
                });
            });

2）几乎相同，但变量在函数

            document.addEventListener('DOMContentLoaded', function(){

                document.getElementById('set-global').addEventListener('click', function(){
                    var myLocal = "I'm a local!";
                    alert(myLocal);
                });
            });

3）如果您需要保留数据，但不要滥用此数据，这是有用的 - 它不是数据库的替代品。

设置存储项目

localStorage.setItem("nameyourdata", "yourdata");

获取存储项目

localStorage.getItem("nameyourdata");

4）与localstorage非常相似，只有几个不同的选项。您可以设置何时到期以及是否仅通过https等提供 Set and Get Cookie

对于3和4，如果你有一个要存储的对象，分别设置和检索时，使用JSON.stringify（data）存储和JSON.parse（数据）。

Answer 2

您可以使用local/global variable，javascript cookies或local storage来完成此操作。我只是使用最后一个，所以最后你的js会看起来像这样。

  var newuser;
  var newpassword;

  function registoTXT() {
            newuser = document.getElementById('inputUser').value;
            newpassword = document.getElementById('inputPassword').value;
            localStorage.setItem('usermail', newuser);
            localStorage.setItem('userpassword',newpassword);
          alert("Utilizador Registado!");
        }

 function check(form) {
            var userName = localStorage.getItem("usermail");
            var passWord = localStorage.getItem("userpassword");
            console.log(userName,passWord,form.usermail.value,form.password.value)
            if ((form.usermail.value === userName && form.password.value === passWord) || (form.username.value === newuser.value && form.password.value === newpassword.value)) {
                alert("Open new window goes here");

            } else {
                alert("E-mail ou Password Inválido(s)!")
            }
        }

Answer 3

您的共享代码段中存在多个问题：

botaologin id用于多个DOM元素。
check(form)中的if条件有多个问题。这是一个固定版本：

if（（form.elements.usermail.value ===“sparedes@isec.pt”＆amp;＆amp; form.elements.password.value ===“12345678”）||（form.elements.usermail。值=== newuser＆amp;＆amp; form.elements.password.value === newpassword））

比较字符串的值与用户输入

3 个答案: