如何使用 vanilla javascript 自定义引导表单验证？

Question

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

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)

<form class="main-form bg-white needs-validation" novalidate action="submit-sell.php" enctype="multipart/form-data" method="POST" id="sellingForm">
  <input name="ProductName" type="text" class="form-control" id="name" placeholder="Samsung mobile phone" required>
  <div class="invalid-feedback">
    Please provide a valid title
  </div>
  <input name="contactNumber" type="tel" maxlength="10" class="form-control" id="contact" placeholder="0777123456" required>
  <div class="invalid-feedback">
    Please provide a valid contact no
  </div>
  <input name="password" type="password" class="form-control" id="password" required>
  <div class="invalid-feedback">
    Please provide a valid password
  </div>
  <input name="repeatPassword" type="password" class="form-control" id="repeatPassword" required>
  <div class="invalid-feedback">
    Passwords did not match
  </div>
  <select class="form-control" id="category" onchange="selectCategory(event)" name="category" required>
    <option value="" selected disabled>Select a category</option>
    <option value="sell_vehicle">Sell Vehicle</option>
    <option value="computer">Computers</option>
    <option value="mobile">Mobile Phones</option>
    <!--Further options-->
  </select>
  <div class="invalid-feedback">
    Please select a category
  </div>
  <input required name="price" type="text" class="form-control" id="price" placeholder="120 000" required>
  <div class="invalid-feedback">
    Please provide a valid price
  </div>
  <input required class="form-check-input" type="radio" name="negotiablity" id="negotiable" value="1">
  <label class="form-check-label">Negotiable </label>
  <input required class="form-check-input" type="radio" name="negotiablity" id="not_negotiable" value="0">
  <label class="form-check-label">Not Negotiable</label>
  <textarea required name="description" rows="5" class="form-control" aria-label="With textarea" placeholder="Enter the product description here"></textarea>
  <div class="invalid-feedback">
    Please provide a valid description
  </div>
  <input type="file" name="image" class="custom-file-input" id="file-input" required multiple name="picture">
  <div class="invalid-feedback">
    Please select a valid image
  </div>
  <button class="btn btn-primary" type="submit">Post Free Ad</button>
</form>

我已尝试自定义文档中给出的引导 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)

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

1. 用户已填写所有必需的输入。
2. 产品名称不得超过 25 个字符，也不得少于 10 个字符。
3. 联系电话不得为数字，不得多于或少于 10 个数字。
4. 我应该检查输入的密码和重复的密码是否匹配
5. 我应该检查所选文件是否为图像（jpeg/png 等格式），以及是否插入了最少一个和最多三个图像。 这些是我需要的主要解决方案，因此我可以应用于其他领域。 请不要使用 Jquery ..

Answer 1

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

为此目的使用input 事件。在键入后从两个字段中获取值，并通过比较值来检查字段的有效性。还包括您对第一个密码的正则表达式检查以提高安全性。

将结果存储在全局变量中，以便您可以在submit 函数中检查密码是否有效。

let isPasswordMatch = false;
let isPasswordValid = false;
const passwordPattern = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}/;
const form = document.getElementById('sellingForm');

form.addEventListener('input', function(event) {
  const formData = new FormData(form);
  const password = formData.get('password');
  const repeatPassword = formData.get('repeatPassword');

  // Validate the pattern again. 
  isPasswordValid = passwordPattern.test(password);

  // This will either be true or false based on if the values are the same or not.
  isPasswordMatch = repeatPassword !== '' && password === repeatPassword;
});

form.addEventListener('submit', function(event) {
  // If either the form is invalid or the passwords don't match, stop!
  if (
    form.checkValidity() === false || 
    (isPasswordValid !== true && isPasswordMatch !== true)
  ) {
    event.preventDefault();
    event.stopPropagation();
  }
  form.classList.add('was-validated');
});

<form id="sellingForm">
  <input name="password" type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}" class="form-control" id="password" required>
  <div class="invalid-feedback">
    Please provide a valid password
  </div>
  <input name="repeatPassword" type="password" class="form-control" id="repeatPassword" required>
  <div class="invalid-feedback">
    Passwords did not match
  </div>
  <button type="submit">Submit</button>
</form>