Javascript 如何使用脚本定制引导表单验证？

我需要根据我的要求定制引导表单验证。这是我表格的HTML

请提供有效的标题
请提供有效的联系电话
请提供有效密码
密码不匹配
选择一个类别
卖车
计算机
手机
请选择一个类别
请提供一个有效的价格
可商议的
不可谈判
请提供有效的描述
请选择一个有效的图像
张贴免费广告

我已经尝试过定制文档中给出的引导JS代码

var form = document.getElementById('sellingForm');
form.addEventListener('submit', function(event) {
  const contact = document.getElementById('contact');
  if (form.checkValidity() === false) {
    if (isNaN(contact.value) || contact.value > 10) {
      event.preventDefault();
      event.stopPropagation();
    }
  }
  form.classList.add('was-validated');
}, false)

但它似乎不起作用。表单未经验证即被提交。我需要帮助来验证以下内容，然后仅当用户输入有效时才提交表单

用户已填写所有必需的输入

产品名称不应超过25个字符，也不应少于10个字符

联系人号码不应为数字，也不应大于或小于10个数字

我应该检查输入的密码和重复的密码是否匹配

我应该检查所选文件是否是图像（jpeg/png等格式），以及是否插入了至少一个图像，最多三个图像。 这些是我需要的主要解决方案，因此我可以应用于其他领域。 请不要Jquery

---

每次用户在任一字段中键入新值时，您都需要检查密码

为此，请使用

输入

事件。键入后从两个字段中获取值，并通过比较值检查字段的有效性。还包括您的正则表达式检查的第一个密码额外的安全性

将结果存储在全局变量中，以便在

submit

功能中检查密码是否有效

让isPasswordMatch=false；
让isPasswordValid=false；
常量密码模式=/（？=.*\d）（？=.[a-z]）（？=.[a-z]）。{8,20}/；
const form=document.getElementById（'sellingForm'）；
form.addEventListener（'input'，函数（事件）{
const formData=新的formData（form）；
const password=formData.get（'password'）；
const repeatPassword=formData.get（'repeatPassword'）；
//再次验证该模式。
isPasswordValid=passwordPattern.test（密码）；
//根据值是否相同，这将是true或false。
isPasswordMatch=repeatPassword！=''&&password===repeatPassword；
});
表单.addEventListener（'submit'，函数（事件）{
//如果表单无效或密码不匹配，请停止！
如果(
form.checkValidity（）==false | |
（isPasswordValid！==true&&isPasswordMatch！==true）
) {
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（'was-validated'）；
});

请提供有效密码
密码不匹配
提交
请创建一个。您的输入没有约束，这意味着它们不是必需的

，或者具有一个检查值是否有效的

模式

属性，如电话号码。没有它，

form.checkValidity（）

check将始终为true。@ChrisG Ok。我想我已经修改了这个示例，只需添加event.preventDefault（）；在const contact声明上方@RifkyNiyas@EmielZuurbier好啊我添加了约束条件，并且工作正常。如何检查密码和重复密码以匹配我尝试了此解决方案，但似乎不起作用。我在密码中添加了一个

pattern=“（？=.*\d）（？=.[a-z]）（？=.[a-z]）。{8,20}”

，以检查密码的一些安全要求。你能修好它吗？我已经编辑了我的答案并把你的正则表达式添加进去了。好的。非常感谢你的回答。这真的帮了我大忙。在此编辑之前，我将您提供的代码的简单版本定制为

repeatPassword.setAttribute（'pattern'，'['+value+']{'+value.length+'}）成功了。如果可能的话，也包括这一点。它更简单有效