怎么弄这个提示栏啊！

img


求各位同志给出详细的代码，必有重酬，就是输入格式如果不对就会有提示框出来


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
 
<body>
<form action="/testform.asp" method="get">
    <input type="text" name="zip_code" pattern="[0-9]{6}" title="六位数" placeholder="请输入0-9的6位数编码"/>
    <input type="submit" value="Submit"/>
</form>
</body>

将文本框设为相对定位，写一个div,用绝对定位，先隐藏。特定条件的时候显示div
题主把需求写清楚点，什么情况显示提示栏，方便提供代码
还有格式是什么


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .display_div{
            border: 1px solid black;
            position: absolute;
            left: 89px;
        }
    </style>

</head>
<body>
Postcode: <input type="text" name="postcode" placeholder="请输入邮编" id="postcode">
<div class="display_div" style="display: none">You must use this format:<br> The character length is 6</div>
</body>
<script>
    var int_elem = document.getElementById("postcode");
    var div_elem = document.getElementsByClassName("display_div");

    int_elem.onblur = function () {
        if (int_elem.value.length !== 6) {
            div_elem[0].style.display = "block";
        } else {
            div_elem[0].style.display = "none";
        }

    }
</script>
</html>

那个样式就不搞了哈，自己弄好看点，功能是没问题的，用的是js,也可以用jq
如果觉得答案对您有帮助，记得采纳哟!

我需要CSS和JS代码