根据输入是否正确将图标放置在表单字段内

问题描述 投票：0回答：1
javascript html css forms icons
1个回答
0
投票

脚本文件中有很多错误，我全部删除了。这是您更正后的代码。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assignment 2 - Website Building</title>
    <style>
        body {
            box-sizing: border-box;
            font-family: sans-serif;
        }

        #login-container {
            width: 460px;
            margin: 0 auto;
        }


        form label,
        form input {
            width: 100%;
            box-sizing: border-box;
        }

        form input {
            padding: 8px;
        }

        form label {
            font-weight: bold;
        }

        form div {
            margin: 16px 0px;
        }

        .invalid {
            border: 2px solid red;
        }

        .valid {
            border: 2px solid green;
        }

        .error-message {
            color: red;
            margin-top: 8px;
        }

        .success-message {
            color: green;
            margin-top: 8px;
        }

        .inputField {
            display: flex;
            position: relative;
        }

        .inputField svg {
            position: absolute;
            right: 5px;
            top: 6px;
        }

        .hide {
            display: none;
        }

    </style>
    <script src="https://kit.fontawesome.com/dde5f4aaa2.js" crossorigin="anonymous"></script>

</head>

<body>

    <div id="login-container">

        <form id="login-form">
            <div>
                <label for="username">Username:</label>
                <div class="inputField">
                    <input id="username" type="text">
                    <svg id="check1" fill="#000000" width="22px" height="22px" viewBox="0 0 24 24" id="check" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><polyline id="primary" points="5 12 10 17 19 8" style="fill: none; stroke: rgb(3, 252, 61); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></polyline></svg>
                    <svg id="close1" fill="#000000" width="20px" height="20px" viewBox="0 0 24 24" id="cross" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><line id="primary" x1="19" y1="19" x2="5" y2="5" style="fill: none; stroke: rgb(252, 3, 19); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line><line id="primary-2" data-name="primary" x1="19" y1="5" x2="5" y2="19" style="fill: none; stroke: rgb(252, 3, 19); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line></svg>
                </div>
                <span id="username-error" class="error-message"></span>
            </div>

            <div>
                <label for="password">Password:</label>
                <div class="inputField">
                    <input id="password" type="password">
                    <svg id="check2" fill="#000000" width="22px" height="22px" viewBox="0 0 24 24" id="check" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><polyline id="primary" points="5 12 10 17 19 8" style="fill: none; stroke: rgb(3, 252, 61); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></polyline></svg>
                    <svg id="close2" fill="#000000" width="20px" height="20px" viewBox="0 0 24 24" id="cross" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><line id="primary" x1="19" y1="19" x2="5" y2="5" style="fill: none; stroke: rgb(252, 3, 19); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line><line id="primary-2" data-name="primary" x1="19" y1="5" x2="5" y2="19" style="fill: none; stroke: rgb(252, 3, 19); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line></svg>
                </div>
                <span id="password-error" class="error-message"></span>
            </div>

            <input type="submit" value="Login">
        </form>

        <div id="error-messages"></div>
    </div>

    <script>
        document.getElementById("check1").classList.add("hide");
        document.getElementById("check2").classList.add("hide");
        document.getElementById("close1").classList.add("hide");
        document.getElementById("close2").classList.add("hide");

        document.getElementById("login-form").addEventListener("submit", function (event) {
            event.preventDefault(); // Prevent form submission

            // Reset previous validation styles
            document.getElementById("username").classList.remove("invalid");
            document.getElementById("password").classList.remove("invalid");
            document.getElementById("username").classList.remove("valid");
            document.getElementById("password").classList.remove("valid");
            document.getElementById("error-messages").innerHTML = "";
            document.getElementById("username-error").textContent = "";
            document.getElementById("password-error").textContent = "";

            // Get input values
            var username = document.getElementById("username").value.trim();
            var password = document.getElementById("password").value.trim();

            var errors = [];

            // Validate username and password
            document.getElementById("username").classList.toggle("invalid", username === "" || username !== "new_user");
            document.getElementById("username").classList.toggle("valid", username === "new_user");

            if (username === "") {
                document.getElementById("username-error").textContent = "Please, enter username";
                errors.push("Username is required.");
            } else if (username !== "new_user") {
                document.getElementById("username-error").textContent = "Please, enter valid username";
                errors.push("Invalid username.");
            }

            if(username === "new_user") {
                document.getElementById("close1").classList.add("hide");
                document.getElementById("check1").classList.remove("hide");
            } else {
                document.getElementById("check1").classList.add("hide");
                document.getElementById("close1").classList.remove("hide");
            }

            document.getElementById("password").classList.toggle("invalid", password === "" || password !== "123456789");
            document.getElementById("password").classList.toggle("valid", password === "123456789");
            if (password === "") {
                document.getElementById("password-error").textContent = "Please, enter password";
                errors.push("password is required.");
            } else if (password !== "123456789") {
                document.getElementById("password-error").textContent = "Please, enter valid password";
                errors.push("Invalid password.");

            } 

            if(password === "123456789") {
                document.getElementById("close2").classList.add("hide");
                document.getElementById("check2").classList.remove("hide");
            } else {
                document.getElementById("check2").classList.add("hide");
                document.getElementById("close2").classList.remove("hide");
            }

            if (errors.length > 0) {
                // Display error messages
                var errorMessageHTML = "<ul class='error-message'>";
                errors.forEach(function (error) {
                    errorMessageHTML += "<li>" + error + "</li>";
                });
                errorMessageHTML += "</ul>";
                document.getElementById("error-messages").innerHTML = errorMessageHTML;
            } else {
                // Successful login
                document.getElementById("username").classList.add("valid");
                document.getElementById("password").classList.add("valid"); 
                document.getElementById("error-messages").innerHTML = "<p class='success-message'>Successful login!</p>";
            }
        })
    </script>

</body>

对 CSS、Html 和脚本进行了更改。

HTML 更改

我在 html 中的字体有问题，所以我使用了 svg，如果你擅长字体，那么你可以使用字体，没有问题。 我已将输入字段和 svg（检查图标和关闭图标）全部包装在带有 inputField 类的 div 中。 在所有四个 svg（2 个用于用户名，2 个用于密码）中，都使用了 uniqueId，这在脚本代码中很有用。

CSS 更改

对于 inputField 已经给出了 flex 和相对位置。 对于 svg 来说，根据您的喜好给出了绝对值并给出了顶部和右侧。 隐藏以最初按照您的要求隐藏 svgs。

脚本更改

最初为所有四个 svgs 添加了 hide 类，以便它们被隐藏。 然后在 if 条件下，我检查用户是否输入了正确的通行证和用户名（如果他们输入了），然后添加隐藏类以关闭 svg 并从检查 svg 中删除隐藏类，否则只需执行相反的操作。 最后，如果检查 errorList 是否为空，您是否输入了应该输出的密码。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.