我有下面的HTML表单，我正在使用它作为密码更改表单。当用户通过身份验证时，他们的配置文件中有一个更改密码的选项，这就是呈现给用户的HTML表单。我有一个单独的HTML表单，我为注册创建了它，这个表单中有一些javascript来执行客户端密码检查，以确保它满足某些复杂性要求。我想在更改密码HTML表单上使用同样的功能，但我很难弄清楚如何最好地实现这一点。
这是我的change_password HTML表单。
{% extends "base.html" %}
{% block content %}
<div class="user-profile">
<div class="page-header">
<h2>Password Change</h2>
</div>
<form action="" method="post" novalidate>
{{ form.hidden_tag() }}
<p>
{{ form.old_password.label }}<br>
{{ form.old_password }}<br>
{% for error in form.old_password.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</p>
<p>
{{ form.new_password.label }}<br>
{{ form.new_password(size=32) }}<br>
{% for error in form.new_password.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</p>
<p>
{{ form.new_password2.label }}<br>
{{ form.new_password2(size=32) }}<br>
{% for error in form.new_password2.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</p>
<p>{{ form.submit() }}</p>
</form>
</div>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class=flashes>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
{% endblock %}
这是我用于用户注册的表单，其中包含用于检查输入密码的javascript，以确保它满足复杂性要求。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Style all input fields */
input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
}
/* Style the submit button */
input[type=submit] {
background-color: #4CAF50;
color: white;
}
/* Style the container for inputs */
.container {
background-color: #f1f1f1;
padding: 20px;
}
/* The message box is shown when the user clicks on the password field */
#message {
display:none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
}
#message p {
padding: 10px 35px;
font-size: 18px;
}
/* Add a green text color and a checkmark when the requirements are right */
.valid {
color: green;
}
.valid:before {
position: relative;
left: -35px;
content: "✔";
}
/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
color: red;
}
.invalid:before {
position: relative;
left: -35px;
content: "✖";
}
</style>
</head>
<body>
<section class="hero is-primary is-fullheight">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div id="navbarMenuHeroA" class="navbar-menu">
<div class="navbar-end">
<a href="{{ url_for('main.index') }}" class="navbar-item">Home</a>
{% if current_user.is_authenticated %}
<a href="{{ url_for('main.profile') }}" class="navbar-item">Profile</a>
{% endif %}
{% if current_user.is_authenticated %}
<a href="{{ url_for('main.tables') }}" class="navbar-item">Tables</a>
{% endif %}
{% if not current_user.is_authenticated %}
<a href="{{ url_for('auth.login') }}" class="navbar-item">Login</a>
{% endif %}
{% if current_user.is_authenticated %}
<a href="{{ url_for('auth.logout') }}" class="navbar-item">Logout</a>
{% endif %}
</div>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container has-text-centered">
</div>
</div>
</section>
<h3>User Signup Form</h3>
<p>Fill in the information below to create an account. Once you've successfully signed up, you'll be taken to the login prompt.</p>
<div class="container">
<form method="POST" action="/signup">
<label for ="email">Email</label>
<input type="email" id="email" name="email" placeholder="Email" required>
<label for="usrname">Name</label>
<input type="text" id="name" name="name" placeholder="Name" required>
<label for="password">Password</label>
<input type="password" id="psw" name="password" placeholder="Password" pattern= "^.*(?=.{12,})(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#!$%^+=]).*$"title="Must contain at least one number and one uppercase and lowercase letter and one special character, and be at least 12 or more characters" required>
<input type="submit" value="Submit">
</form>
</div>
<div id="message">
<h3>Password must contain the following:</h3>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>12 characters</b></p>
<p id="character" class="invalid">Minimum <b>1 special character</b></p>
</div>
<script>
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
var character = document.getElementById("character")
// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
document.getElementById("message").style.display = "block";
}
// When the user clicks outside of the password field, hide the message box
myInput.onblur = function() {
document.getElementById("message").style.display = "none";
}
// When the user starts to type something inside the password field
myInput.onkeyup = function() {
// Validate lowercase letters
var lowerCaseLetters = /[a-z]/g;
if(myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("invalid");
letter.classList.add("valid");
} else {
letter.classList.remove("valid");
letter.classList.add("invalid");
}
// Validate capital letters
var upperCaseLetters = /[A-Z]/g;
if(myInput.value.match(upperCaseLetters)) {
capital.classList.remove("invalid");
capital.classList.add("valid");
} else {
capital.classList.remove("valid");
capital.classList.add("invalid");
}
// Validate numbers
var numbers = /[0-9]/g;
if(myInput.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
} else {
number.classList.remove("valid");
number.classList.add("invalid");
}
// Validate length
if(myInput.value.length >= 12) {
length.classList.remove("invalid");
length.classList.add("valid");
} else {
length.classList.remove("valid");
length.classList.add("invalid");
}
// Validate character
var special_character = /[^A-Za-z0-9]/g;
if(myInput.value.match(special_character)) {
character.classList.remove("invalid");
character.classList.add("valid");
} else {
character.classList.remove("valid");
character.classList.add("invalid");
}
}
</script>
</body>
</html>
我想在我的HTML表单上使用相同的javascript逻辑。我该怎么做？感谢
在注册中，您有一个完整的脚本部分，用于检查密码栏的onkeyup，以及几个元素，以提醒用户它们缺少了什么，只需将元素及其id引用复制到新文件中，并为新文件中的密码字段添加一个onkeyup事件，并添加注册表单中的所有it语句，到新文件
加上现在第一个中根本没有JavaScripts