Blur上的单独输入验证

我试图使用HTML5来验证数字输入。我使用jQuery来创建元素。如何让浏览器在不需要点击提交按钮的情况下显示错误消息onBlur？Blur上的单独输入验证

jQuery(document.createElement('input')).attr({"type":"number","min":"0","max":"60","step":"1","value":"5"});

2011-07-19 bchang02

其实，你无法通过API调用本地验证UI。由于事实，验证UI自动也关注元素，这不是一个很好的可用性（用户不能离开字段无效并决定在页面上做其他事情）。

如果你想这样做：你必须使用validity属性和validationMessage属性来实现验证yourslf。该代码可能看起来像这样：

$('input[type="number"]').blur(function(){ 
    //if field is validation candidate and is invalid alert the validationmessage 
    if($.prop(this, 'willValidate') && !$.prop(this, 'validity').valid){ 
     alert($.prop(this, 'validationMessage'); 
    } 
});

当然使用警报，有点愚蠢，但使代码干净。如果你想使用webshims lib，那么有一个showError助手。我提出了一个demo here

关于辅助方法$ .webshims.validityAlert.showFor：

showFor需要一个DOM元素的jQuery对象或选择作为第一个参数。验证消息作为可选的第二个，最后一个是布尔值，它将显示消息而不关注字段。

来源

2011-07-19 22:15:16

啊谢谢！这对于原生UI验证非常不错。虽然如果他们实施个人验证会很好。 – bchang02

建立一个.blur（）处理。请参阅here。

来源

2011-07-19 21:38:23

jQuery(document.createElement('input')).attr({"type":"number","min":"0","max":"60","step":"1","value":"5"}).blur(function(){ 
    var val = parseInt(jQuery(this).val(),10); 
    if(val < parseInt(jQuery(this).attr('min'), 10)) 
     jQuery(this).val(parseInt(jQuery(this).attr('min'), 10)); // Set value to min 
    if(val > parseInt(jQuery(this).attr('max'), 10)){ 
     jQuery(this).val(parseInt(jQuery(this).attr('min'), 10)); // Set value to max 
});

东西沿着这些线路

来源

2011-07-19 21:41:08 Paulpro

Blur上的单独输入验证

回答

相关问题