Javascript + Spring 引导 + Thymeleaf - 表单验证

Question

我正在尝试验证密码并查看它们是否匹配使用 JavaScript 如果密码不匹配显示错误，但有些奇怪的原因就像 Javascript 没有被检测到，只是提交错误的字段。

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Reset Your Password</title>

</head>
<body>
<script "text/Javascript">

    document.querySelector('.button').onclick = function (){
        var password = document.querySelector('.password').value,
            confirmPassword = document.querySelector('.confirmPassword').value;

        if(password === ""){
            alert("Field cannot be empty.");
        }
        else if(password !== confirmPassword){
            alert("Password didn't match try again");
        }else if(password === confirmPassword){
            alert("Password match")
        }
    }
</script>
<div class="elelment">
    <h2>Reset Your Password</h2>
    <div class="element-main">
        <h1>Forgot Password</h1>
<form th:action="@{/api/auth/reset_password}" method="post" style="max-width: 350px; margin: 0 auto;">
    <input type="hidden" name="token" th:value="${token}" />
    <div class="border border-secondary rounded p-3">
        <div>
            <p>
                <input type="password" name="password" id="password" class="password"
                       placeholder="Enter your new password"  />
            </p>
            <p>
                <input type="password" class="confirmPassword" id="confirmPassword"  placeholder="Confirm your new password"
                 />
            </p>
            <p class="text-center">
                <input type="submit" value="Change Password" class="button" />
            </p>
        </div>
    </div>
</form>
    </div>
</div>
<div class="copy-right">
    <p>© 2021 Reset Password Form. All rights reserved</a></p>
</div>

</body>
</html>

我不确定为什么没有检测到 JavaScript 并将其应用于表单以验证密码字段

Answer 1

兄弟尝试将您的脚本标签更改为：

    <script th:inline="javascript">
       //your checking conditions
    </script>

让我知道这个是否奏效。

Javascript + Spring 引导 + Thymeleaf - 表单验证

问题描述

1 个解决方案

解决方案1
0 2021-01-11 15:57:41

Javascript + Spring 引导 + Thymeleaf - 表单验证

问题描述

1 个解决方案

解决方案1 0 2021-01-11 15:57:41

解决方案1
0 2021-01-11 15:57:41