显示特定CSS格式的警告消息

Question

我看到对话框如下图所示，

这是在输入文本提交后出现错误的MAC地址格式的警告消息。我想立即验证输入，而不是在提交之后。在哪里可以找到这种CSS样式？

Answer 1

尝试一下：

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 112.5%;
    margin-left: auto;
    margin-right: auto;
    max-width: 40em;
    width: 88%;
}  

/**
 * Form Styles
 */
label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5em;
}

.label-normal {
    font-weight: normal;
}

.pattern {
    color: #808080;
    font-size: 0.8em;
    font-weight: normal;
}

.supports-color .color,
.supports-date .date,
.supports-time .time,
.supports-month .mont {
    display: none;
}

input,
select {
    display: inline-block;
    font-size: 1em;
    margin-bottom: 1em;
    padding: 0.25em 0.5em;
    width: 100%;
}

[type="checkbox"],
[type="radio"] {
    margin-bottom: 0.5em;
    width: auto;
}

.button {
    background-color: #0088cc;
    border: 1px solid #0088cc;
    border-radius: 1px;
    color: #ffffff;
    display: inline-block;
    font-size: 0.9375em;
    font-weight: normal;
    line-height: 1.2;
    margin-right: 0.3125em;
    margin-bottom: 0.3125em;
    padding: 0.5em 0.6875em;
    width: auto;
}

.button:active,
.button:focus,
.button:hover {
    background-color: #005580;
    border-color: #005580;
    color: #ffffff;
    text-decoration: none;
}

.button:active {
    box-shadow: inset 0 0.15625em 0.25em rgba(0, 0, 0, 0.15), 0 1px 0.15625em rgba(0, 0, 0, 0.05);
}

<form>
    <div>
        <label for="text">Text Input</label>
        <input type="text" id="text" required>
    </div>

    <div>
        <label for="minmaxlength">Text with Min and Max Length</label>
        <input type="text" id="minmaxlength" minlength="3" maxlength="12">
    </div>

    <div>
        <label for="password">Password (must contain at least 1 uppercase character, 1 lowercase character, and 1 number)</label>
        <input type="password" id="password" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" required>
    </div>

    <div>
        <label for="passwordwithtitle">Password with Title Attribute</label>
        <input type="password" id="passwordwithtitle" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" title="Please include at least 1 uppercase character, 1 lowercase character, and 1 number." required>
    </div>

    <div>
        <label for="passwordcombined">Password with Pattern and Min Length</label>
        <input type="password" id="passwordcombined" minlength="8" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" title="Please include at least 1 uppercase character, 1 lowercase character, and 1 number." required>
    </div>

    <input type="submit" class="button" value="Submit">
</form>

Answer 2

如果需要立即进行验证，则必须将novalidate属性添加到<form>标记中。 然后在js代码中，您必须在输入中添加侦听器，并在每次更改时验证并显示所需的消息。

$('input').on('change keyup keydown',()=>{//validation code; })