Question

当我在输入元素上使用.checkValidity（）并返回false时，如何获得失败原因？

我知道我可以使用ValidityState interface并检查每个可能的失败，但是这些操作只会返回布尔值。

使用默认浏览器的有效性检查实现，它将为用户提供一个解释有效性检查失败的字符串。

例如，如果您要使用：

<input type="email" />

然后用户使用me@.domain.com提交表单，它将为用户提供一个读取'.' is used at a wrong position in '@.domain.com'的工具提示。

我正在创建自己的表单验证实现，因为我不喜欢浏览器默认工具提示的样式和行为，并且如果我可以向用户提供相同类型的验证消息，显然这将是更好的UX简单地使用诸如“您输入的电子邮件无效”之类的通用名称。

Answer 1

嗨，您可以使用元素的validationMessage属性

validationMessage：包含浏览器将在有效性是错误的。

调用checkValidity（）之后，然后检索元素的validationMessage属性。

var inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  } else {
    document.getElementById("demo").innerHTML = "Input OK";
  }

Answer 2

在这里，我为您的测试提供了示例代码。请使用此示例代码作为参考。

<!DOCTYPE html>
<html>
<head>
    <title>Tool Tip</title>
    <style>
        /* Tooltip container */
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
            /* If you want dots under the hoverable text */
        }

        /* Tooltip text */
        .tooltip .tooltiptext {
            visibility: hidden;
            max-width: 300px;
            background-color: #555;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            border-radius: 3px;

            /* Position the tooltip text */
            position: absolute;
            z-index: 1;
            bottom: -150%;
            left: 50%;
            margin-left: -60px;
            width: 400px;
            word-wrap: nowrap;
            /* Fade in tooltip */
            opacity: 0;
            transition: opacity 0.3s;
        }

        /* Tooltip arrow */
        .tooltip .tooltiptext::before {
            content: "";
            position: absolute;
            top: -15%;
            right: 50%;

            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid #555;

        }

        /* Show the tooltip text when you mouse over the tooltip container */
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="tooltip">
        <input type="email" id="myemail" />
        <div class="tooltiptext" id=validationMessage>Please enter valid Email</div>
    </div>
</body>
<script>
    var myemail = document.getElementById("myemail");
    myemail.oninput = function () {
    document.getElementById("validationMessage").innerHTML = myemail.validationMessage;
    }
    myemail.onchange = myemail.oninput;
</script>
</html>

使用.checkValidity（）时如何获取有效性失败的原因

2 个答案: