如何触发HTML5验证，如何在变更事件上设置自定义消息？

触发HTML5验证可以通过以下两种方式实现：

使用表单提交按钮触发验证：在HTML表单中，可以使用<input type="submit">或<button type="submit">作为提交按钮，当用户点击该按钮时，浏览器会自动触发HTML5验证。如果表单中存在必填字段未填写或输入格式不符合要求，浏览器会显示相应的验证提示信息。
使用JavaScript手动触发验证：可以通过JavaScript代码来手动触发HTML5验证。使用checkValidity()方法可以检查表单中的所有字段是否通过验证，返回一个布尔值。如果返回false，则表示有字段未通过验证，可以通过setCustomValidity()方法设置自定义的验证消息。

在变更事件上设置自定义消息可以通过以下步骤实现：

获取需要设置自定义消息的表单元素：可以通过document.getElementById()或其他选择器方法获取到相应的表单元素。
监听变更事件：使用addEventListener()方法为表单元素添加变更事件的监听器。变更事件可以是change、input、blur等，根据具体需求选择合适的事件。
在事件处理函数中设置自定义消息：在事件处理函数中，使用setCustomValidity()方法为表单元素设置自定义消息。该方法接受一个字符串参数，作为自定义消息的内容。

以下是一个示例代码，演示如何触发HTML5验证并设置自定义消息：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" required>
  <button type="submit">提交</button>
</form>

<script>
  var nameInput = document.getElementById('name');

  nameInput.addEventListener('change', function() {
    if (nameInput.validity.patternMismatch) {
      nameInput.setCustomValidity('请输入有效的姓名');
    } else {
      nameInput.setCustomValidity('');
    }
  });
</script>

在上述示例中，name输入框使用了required属性，表示该字段为必填字段。在change事件处理函数中，通过判断validity.patternMismatch属性，如果输入的姓名不符合指定的正则表达式模式，则设置自定义消息为"请输入有效的姓名"，否则清空自定义消息。

腾讯云相关产品和产品介绍链接地址：