当HTML5所需的输入模式不通过时,如何创建自定义消息?

我有以下几点:
<input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" />

当我输入一个字符时,我会收到一条消息:

"Please match the requested format"

有没有办法我可以自定义这个消息,说“请输入至少5个字符”

解决方法

使用:setCustomValidity

码:

$(function(){
    $("input[name=Password]")[0].oninvalid = function () {
        this.setCustomValidity("Please enter at least 5 characters.");
        this.setCustomValidity("");
    };
});

HTML5 form required attribute. Set custom validation message?

JSfiddlehttp://jsfiddle.net/yT3w3/

非JQuery解决方案:

function attachHandler(el,evtname,fn) {
    if (el.addEventListener) {
        el.addEventListener(evtname,fn.bind(el),false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + evtname,fn.bind(el));
    }
}
attachHandler(window,"load",function(){
    var ele = document.querySelector("input[name=Password]");
     attachHandler(ele,"invalid",function () {
        this.setCustomValidity("Please enter at least 5 characters.");
        this.setCustomValidity("");
    });
});

JSfiddlehttp://jsfiddle.net/yT3w3/2/

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码