使用required属性在HTML5输入字段上设置提示样式

//Note: that we use true for useCapture, because invalid does not bubble
document.addEventListener(\'invalid\', function(e){
    //prevent the browser from showing his error bubble
    e.preventDefault();
    //now you can implement your own validation UI (showError is a Custom method which has to be implemented by you
    showError(e.target, $.prop(e.target, \'validationMessage\');
}, true);

document.addEventListener(\'invalid\', (function(){
    var isFirst = true;
    return function(e){
        //prevent the browser from showing his error bubble
        e.preventDefault();
        //now you can implement your own validation UI
        if(isFirst){
            showError(e.target, $.prop(e.target, \'validationMessage\');
            //set isFirst to false
            isFirst = false;
            //reset isFirst to true, so user can try to submit invalid forms multiple times
            setTimeout(function(){
                isFirst = true;
            }, 9);
        }
    };
})(), true);

$(document).bind(\'firstinvalid\', function(e){
    $.webshims.validityAlert.showFor( e.target ); 
    //prevent browser from showing native validation message 
    return false; 
});

$.webshims.validityAlert.showFor

<span class=\"validity-alert\" role=\"alert\"> 
    <span class=\"va-arrow\"><span class=\"va-arrow-box\"></span></span> 
    <span class=\"va-box\">Error message of the current field</span> 
</span>

::-webkit-validation-bubble
::-webkit-validation-bubble-top-outer-arrow
::-webkit-validation-bubble-top-inner-arrow
::-webkit-validation-bubble-message

x-moz-errormessage

div { display: none; }
body div { display: block; }