如何使用“signup.js”等外部脚本检查两个字段的身份？

Question

I work with Electron.我与电子合作。 I have three files in my project.我的项目中有三个文件。

index.html索引.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="../css/styles.css">
        <script src="../js/preload.js"></script>
        <script src="../js/signup.js"></script>
    </head>
    <body>
        <form action="" onsubmit="return validate()">
            <label for="email"><b>Почта</b></label>
            <input type="text" placeholder="Введите почту..." name="email" required>
            <label for="psw"><b>Пароль</b></label>
            <input type="password" placeholder="Введите пароль..." id="psw" required>
            <label for="psw-repeat"><b>Подтверждение пароля</b></label>
            <input type="password" placeholder="Повторите пароль..." id="psw-repeat" required>
            <hr>
            <p id = "terms">Создавая аккаунт, вы соглашаетесь с нашими <a href="#">условиями пользования и приватности</a>.</p>
            <button type="submit" class = registerbtn>Зарегистрироваться</button>
        </form>      
    </body>
</html>

styles.css样式文件

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

body {
    font-family: 'Raleway', sans-serif;
}

.sign_up {
    padding: 16px;
}

input[type=text],
input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
    font-family: 'Raleway', sans-serif;
}

hr 
{
    border: 1px solid #f1f1f1;
    margin-bottom: 25px;
}

.registerbtn {
    background-color: darkcyan;
    color: white;
    padding: 16px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}

.registerbtn:hover {
    opacity: 1;
}

a {
    color: dodgerblue;
}

#warning {
    color: crimson;  
}

signup.js注册.js

function validate()
{
    var password = document.getElementById(psw).value;
    var password_repeat = document.getElementById(psw-repeat).value
    if(password != password_repeat)
    {
       document.getElementById(psw).insertAdjacentHTML("afterend", "<p id = \"warning\">Пароли не совпадают!</p>")
    }
}

The project itself is written in Russian.该项目本身是用俄语编写的。 I want to use the file signup.js to check the identity of the fields "psw" and "psw-repeat", but when the program runs, nothing happens.我想使用文件 signup.js 来检查字段“psw”和“psw-repeat”的身份，但是当程序运行时，没有任何反应。 As for the content of the fields, they are emptied when the button is clicked.至于字段的内容，当点击按钮时它们会被清空。

Answer 1

The onsubmit value should only have method call, not with "return". onsubmit值应该只有方法调用，而不是“返回”。

So, I suggest you to use something like this:所以，我建议你使用这样的东西：

onsubmit="validate()"

Documentation文档

Also, the submit button have issue with "class" css, it should look like this:此外，提交按钮有“类”css 问题，它应该是这样的：

<button type="submit" class="register btn">Зарегистрироваться</button>

如何使用“signup.js”等外部脚本检查两个字段的身份？

问题描述

1 个解决方案

解决方案1
0 2021-10-20 14:45:37

如何使用“signup.js”等外部脚本检查两个字段的身份？

问题描述

1 个解决方案

解决方案1 0 2021-10-20 14:45:37

解决方案1
0 2021-10-20 14:45:37