时间戳

首页 > 解决方案 > 如何通过 Javascript 操作 HTML 自定义验证的外观？

javascript - 如何通过 Javascript 操作 HTML 自定义验证的外观？

问题描述

如何自定义 JavaScript 的验证反馈样式或使用语音气泡？

我将展示两个示例：

验证 1

验证 2

我希望在第二个屏幕截图上显示验证，类似于第一个屏幕截图（不仅出现在鼠标悬停上）。是什么让我得到了第二张截图的反馈：

<input id="MyInputField" type=text required></input>

function setCustomVal() {
    let field = document.getElementById("MyInputField");
    field.setCustomValidity("User Feedback");
}

这不完全是我截取屏幕截图的代码，但它是以相同的方式实现的。

我想像第一张图片一样提供自定义用户关于验证的反馈。

标签： javascripthtmlvalidation

解决方案

使用名为popper.js的第三方库会更理想，它们提供了关于弹出窗口/提示样式的良好文档。但是，您需要手动应用新的验证方法，而不是使用 required 属性。

var popper = new Popper(referenceElement, onPopper, {
    placement: 'bottom'
});

推荐阅读