Question

作为HTML / JS学习练习的一部分，我试图创建一个非常简单的用户身份验证用户html表单。我知道将输入发送到服务器端PHP更好，但我只想创建一个表单：

创建一个简单的表单
创建一个读取表单元素的提交按钮
如果该表单项是访问下一页所需的密码，请使用javascript函数验证使用onclick（提交时）属性。

到目前为止，这是我的代码：

我的HTML

        <div id="login">

        <fieldset>
            <legend>Login</legend>
            Password: <input id ="pswd" type="password" name="psw" value="">
            <br>
            <input type="submit" value ="Submit" onclick = "formValidate()">
        </fieldset>

        </div>

    </div>

我的JS

function formValidate(){
    var validated: false;
    if(document.getElementById("pswd").value == "a"){
        alert("Wow this worked");
        validated = true;
    }
    return validated;
}

我似乎没有关于如何将html项链接到JS函数的正确知识，反之亦然。当我在线查看时，它主要使用表单来做PHP的东西。

此外，如果有人也可以将我放在正确的轨道上，如果密码正确，则将我的用户发送到新页面。（在这种情况下，简单的＆＃34; a＆＃34;）

谢谢，亚历

Answer 1

我能够通过删除内联JS（这通常是一种不好的做法）并添加事件监听器来使其工作。

HTML：

foo.__len__()

JS：

<div id="login">
        <fieldset>
            <legend>Login</legend>
            Password: <input id="pswd" type="password" name="psw" value="">
            <br />
            <input type="submit" value ="Submit" id="subbutton">
        </fieldset>
</div>

关于在验证后引导用户的问题，请在document.getElementById("subbutton").addEventListener("click", function () { var validated = false; if(document.getElementById("pswd").value == "a"){ alert("Wow this worked"); validated = true; } return validated; });语句中添加此代码段，将Google URL替换为您想要的URL：

if

看看这个JSFiddle： https://jsfiddle.net/ex3etnpc/

如果您需要有关PHP表单处理的资源，请查看本教程here.

链接页面和客户端密码HTML / JS

1 个答案: