该实例如下所示 - 在线编辑器

<form>
  <label for="name"> 输入用户名（大写和小写字母）：</label>
  <input type="text" name="name" id="name" required pattern="[A-Za-z]+">
  <button>提交</button>
</form>

<script>
const nameInput = document.querySelector('input');
const form = document.querySelector('form');

nameInput.addEventListener('input', () => {
  nameInput.setCustomValidity('');
  nameInput.checkValidity();
});

nameInput.addEventListener('invalid', () => {
  if(nameInput.value === '') {
    nameInput.setCustomValidity('输入你的用户名！');
  } else {
    nameInput.setCustomValidity('用户名只能包含大写和小写字母。再试一次！');
  }
});
</script>
​x
 
<form>
  <label for="name"> 输入用户名（大写和小写字母）：</label>
  <input type="text" name="name" id="name" required pattern="[A-Za-z]+">
  <button>提交</button>
</form>
​
<script>
const nameInput = document.querySelector('input');
const form = document.querySelector('form');
​
nameInput.addEventListener('input', () => {
  nameInput.setCustomValidity('');
  nameInput.checkValidity();
});
​
nameInput.addEventListener('invalid', () => {
  if(nameInput.value === '') {
    nameInput.setCustomValidity('输入你的用户名！');
  } else {
    nameInput.setCustomValidity('用户名只能包含大写和小写字母。再试一次！');
  }
});
</script>
​