如何将javascript密码检查器添加到html表单

我使用下面的HTML表单作为密码更改表单。当用户通过身份验证时，他们的配置文件中有一个更改密码的选项，这是呈现给用户的HTML表单。我为注册创建了一个单独的HTML表单，该表单中包含一些javascript来执行客户端密码检查，以确保它满足某些复杂性要求。我想在ChangePassword HTML表单上使用相同的功能，但我在想如何最好地实现这一点时遇到了一些困难

这是我的更改密码HTML表单

{%extends“base.html”%}
{%block content%}
密码更改
{{form.hidden_tag（）}}

{{form.old_password.label}}

{{form.old_password}}

{%for form.old_password.errors%}
[{{error}}]
{%endfor%}


{{form.new_password.label}}

{{form.new_密码（大小=32）}

{%form.new_password.errors%}
[{{error}}]
{%endfor%}


{{form.new_password2.label}}

{{form.new_password2（size=32）}

{%for form.new_password2.errors%}
[{{error}}]
{%endfor%}

{{form.submit（）}}

{%with messages=get_flashed_messages（）%}
{%if消息%}

{消息%中的消息为%s}
{{message}}
{%endfor%}

{%endif%}
{%endwith%}
{%endblock%}

这是我用于用户注册的表单，其中包含javascript，用于检查输入的密码以确保其满足复杂性要求

/*设置所有输入字段的样式*/
输入{
宽度：100%；
填充：12px；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
边缘顶部：6px；
边缘底部：16px；
}
/*设置提交按钮的样式*/
输入[类型=提交]{
背景色：#4CAF50；
颜色：白色；
}
/*为输入设置容器的样式*/
.集装箱{
背景色：#f1f1；
填充：20px；
}
/*当用户单击密码字段时，将显示消息框*/
#信息{
显示：无；
背景#f1f1；
颜色：#000；
位置：相对位置；
填充：20px；
边缘顶部：10px；
}
#信息p{
填充：10px 35px；
字号：18px；
}
/*当要求正确时，添加绿色文本颜色和复选标记*/
.有效{
颜色：绿色；
}
.有效期：之前{
位置：相对位置；
左：-35px；
内容：“✔";
}
/*当要求错误时，添加红色文本颜色和“x”*/
.无效{
颜色：红色；
}
.无效：之前{
位置：相对位置；
左：-35px；
内容：“✖";
}
{%如果当前用户是经过身份验证的%}
{%endif%}
{%如果当前用户是经过身份验证的%}
{%endif%}
{如果不是当前用户，则为%。{u已验证%}
{%endif%}
{%如果当前用户是经过身份验证的%}
{%endif%}
用户注册表格
填写以下信息以创建帐户。成功注册后，系统将提示您登录

电子邮件
名称
密码
密码必须包含以下内容：
小写字母
大写字母
一个数字

至少12个字符
至少1个特殊字符
var myInput=document.getElementById（“psw”）；
var字母=document.getElementById（“字母”）；
var资本=document.getElementById（“资本”）；
var编号=document.getElementById（“编号”）；
var length=document.getElementById（“长度”）；
var character=document.getElementById（“字符”）
//当用户单击密码字段时，显示消息框
myInput.onfocus=函数（）{
document.getElementById（“message”）.style.display=“block”；
}
//当用户在密码字段外单击时，隐藏消息框
myInput.onblur=函数（）{
document.getElementById（“消息”）.style.display=“无”；
}
//当用户开始在密码字段中键入内容时
myInput.onkeyup=函数（）{
//验证小写字母
var lowerCaseLetters=/[a-z]/g；
if（myInput.value.match（小写字母））{
信函。类列表。删除（“无效”）；
信函。类别列表。添加（“有效”）；
}否则{
信函。类别列表。删除（“有效”）；
字母.classList.add（“无效”）；
}
//验证大写字母
var大写字母=/[A-Z]/g；
如果（myInput.value.match（大写字母））{
大写.classList.remove（“无效”）；
大写.classList.add（“有效”）；
}否则{
大写.classList.remove（“有效”）；
大写.classList.add（“无效”）；
}
//验证数字
变量数=/[0-9]/g；
如果（myInput.value.match（数字））{
number.classList.remove（“无效”）；
number.classList.add（“有效”）；
}否则{
number.classList.remove（“有效”）；
number.classList.add（“无效”）；
}
//验证长度
如果（myInput.value.length>=12）{
length.classList.remove（“无效”）；
length.classList.add（“有效”）；
}否则{
length.classList.remove（“有效”）；
length.classList.add（“无效”）；