使用setCustomValidity检查条件并显示两条不同的消息

是指在前端开发中，通过setCustomValidity方法来检查用户输入的条件，并根据条件的不同显示不同的错误消息。

setCustomValidity是HTML5中的一个方法，它可以用于对表单元素进行验证。通过调用该方法，可以设置一个自定义的验证消息，用于提示用户输入的有效性。

在使用setCustomValidity方法时，一般需要结合表单元素的validity属性来判断输入条件是否满足。validity属性是一个包含了一系列验证属性的对象，例如validity.valid表示输入是否有效，validity.patternMismatch表示输入是否符合指定的模式等。

下面是一个示例代码，演示了如何使用setCustomValidity检查条件并显示两条不同的消息：

<form>
  <input type="text" id="username" required pattern="[A-Za-z]{5,}" oninvalid="setCustomValidity('用户名必须由至少5个字母组成')" oninput="setCustomValidity('')">
  <input type="submit" value="提交">
</form>

在上述代码中，我们创建了一个文本输入框，并设置了必填属性（required）和正则表达式模式（pattern）。同时，我们通过oninvalid事件和oninput事件来调用setCustomValidity方法。

当用户输入的用户名不满足至少5个字母的条件时，setCustomValidity方法会被调用，并设置错误消息为"用户名必须由至少5个字母组成"。当用户输入符合条件时，我们通过设置空字符串来清除错误消息。

这样，用户在输入不符合条件时，会看到相应的错误提示消息，帮助他们更好地理解输入的要求。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。

• 腾讯云云服务器（CVM）：腾讯云提供的弹性计算服务，可满足各类业务场景的需求。详情请参考腾讯云云服务器产品介绍。
• 腾讯云云数据库MySQL：腾讯云提供的高性能、可扩展的云数据库服务，适用于各类应用场景。详情请参考腾讯云云数据库MySQL产品介绍。