<script>
    function replaceValidationUI(form) {

        form.addEventListener("invalid", function(event) {
            event.preventDefault();
            var inValidityField = form.querySelectorAll(":invalid"),
                errorMessage = form.querySelectorAll(".error-message"),
                parent;

            for (var i = 0; i < errorMessage.length; i++) {
                errorMessage[i].parentNode.removeChild(errorMessage[i]);
            }
            for (var i = 0; i < inValidityField.length; i++) {
                parent = inValidityField[i].parentNode;
                parent.insertAdjacentHTML("beforeend", "<div class='error-message'>" + inValidityField[i].validationMessage + "</div>")
            }
            if (inValidityField.length > 0) {
                inValidityField[0].focus();
            }
        }, true);
    }
    var form = document.getElementById("forms");
    replaceValidationUI(form);
    </script>

没搞明白为什么需要监听表单的"submit"事件，所以我在这里去掉了监听"submit"事件，也不明白为什么要在点击按钮的时候才开始获取不符合验证的元素，所以我在form元素监听"invalid"的时候就开始获取不符合验证的元素，然后添加错误提示，最后发现好像也能实现效果，老师帮忙看下这样行不行，如果不行帮我解答一下上面的那两个疑惑，谢谢