使用内部控制 setValidity 美元

在前端开发中，有时需要验证用户输入的表单数据是否满足要求。HTML5 提供了一种内置的验证机制，可以通过设置 required、minlength、maxlength 等属性来实现基本的验证功能。但是这些属性并不能涵盖所有的验证需求。

在这种情况下，我们可以使用 HTML5 提供的 setCustomValidity() 方法来进行自定义验证。该方法可以将一个自定义错误消息与表单元素相关联，并在表单提交时显示该错误消息。

内部控制 setValidity 美元

setCustomValidity() 方法只能在表单元素上调用，不能在表单容器上调用。但是在某些情况下，我们希望将验证逻辑封装在一个组件中，而不是在每个表单元素上重复编写代码。为了解决这个问题，我们可以使用一个内部控件（Internal Control）来管理验证逻辑，并使用 setCustomValidity() 方法来设置错误消息。

以下是一个简单的内部控件示例：

<div class="form-group">
  <label for="password">Password</label>
  <input type="password" id="password" name="password" required minlength="8">
  <div class="error-msg"></div>
</div>

<script>
class PasswordInput {
  constructor(inputElement, errorMsgElement) {
    this.inputElement = inputElement;
    this.errorMsgElement = errorMsgElement;

    this.init();
  }

  init() {
    this.inputElement.addEventListener('input', () => {
      const valid = this.validate();
      if (!valid) {
        this.showError();
      } else {
        this.hideError();
      }
    });

    this.inputElement.addEventListener('invalid', (event) => {
      event.preventDefault();
    });
  }

  validate() {
    const value = this.inputElement.value;
    const valid = value.length >= 8;
    return valid;
  }

  showError() {
    this.errorMsgElement.innerHTML = 'Password must be at least 8 characters long.';
    this.inputElement.setCustomValidity('invalid');
  }

  hideError() {
    this.errorMsgElement.innerHTML = '';
    this.inputElement.setCustomValidity('');
  }
}

const passwordInput = new PasswordInput(
  document.getElementById('password'),
  document.querySelector('.error-msg')
);
</script>

在上面的示例中，我们创建了一个名为 PasswordInput 的内部控件，并将密码输入框和错误消息容器作为构造函数参数传递。在 init() 方法中，我们注册了 input 和 invalid 事件的监听器。当用户在密码输入框中输入时，我们调用 validate() 方法来检查密码是否符合要求。如果密码无效，则调用 showError() 方法来显示错误消息并将表单元素的自定义错误状态设置为 invalid；否则，调用 hideError() 方法来隐藏错误消息并将表单元素的自定义错误状态设置为空字符串。

总结

使用内部控制 setCustomValidity() 方法可以将验证逻辑封装在一个组件中，从而避免在每个表单元素上重复编写代码。此外，内部控制还可以使我们更好地组织和管理表单数据，并提供更好的用户体验。

然而，需要注意的是，使用内部控制可能会导致一些较为复杂的验证逻辑难以实现。在这种情况下，我们仍然需要在表单元素上编写自定义验证函数来实现所需的功能。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/12435