html代码：

1
2
3
4
<form name="test" action="" method="post">
        <input type="text" required pattern="^\d{11}$" oninput="out(this)" placeholder="请输入11位数字" maxlength="11">
        <button type="submit">Check</button>
</form>

JavaScript代码

1
2
3
4
5
6
7
8
9
10
11
12
function out(i){
    var v = i.validity;
    if(true === v.valueMessing){
        i.setCustomValidity("请填写些字段");
    }else{
        if(true === v.patternMismatch){
            i.setCustomValidity("请输入11位数字的代码");
        }else{
            i.setCustomValidity("");
        }
    }
}

验证通过与否除了跟validity接口下的属性相关外，还跟validationMessage是否有值有关系。只有当validity接口下的属性（customError除外）都为false并且validationMessage为空时才算验证通过。
具体可参考 http://www.w3.org/TR/2011/WD-html5-author-20110705/association-of-controls-and-forms.html#dom-cva-setcustomvalidity