HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用。HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架。接下来我们用几行简单的代码改掉默认的验证提示信息。

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("这个字段是必填的呦。");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

有关于更多HTML5的表单验证请参阅:

Data form validation

See the Pen HTML 5 Custom Validition Message by seriawei (@seriawei) on CodePen.