模糊的个人输入验证

Individual Input Validation on Blur

本文关键字：输入 验证 模糊      更新时间：2023-09-26

我正在尝试使用HTML5来验证数字输入。我使用jQuery来创建元素。我怎样才能让浏览器显示错误信息onBlur而不必点击提交按钮?

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

设置.blur()处理程序。看到这里。

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
});

这几行

实际上，您不能通过API调用本机验证ui。由于验证界面也自动聚焦元素，这将不是一个很好的可用性(用户不能让字段无效，并决定在页面上做其他事情)。

如果你想这样做:你必须自己使用validity属性和validationMessage属性实现验证。代码可能像这样:

$('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帮助器。我在这里放了一个演示

关于帮助器方法$.webshims.validityAlert.showFor:

showFor需要一个dom元素jQuery对象或选择器作为第一个参数。validationmessage是可选的最后一个是布尔值，它将显示消息而不聚焦字段。

下面的代码解决了我的问题

 $("input[type=number]").blur(function(){                             
     if(parseInt($(this).val())>parseInt($(this).attr("max"))){
           $(this).val($(this).attr("max"));
     }else if(parseInt($(this).val())<parseInt($(this).attr("min"))){
        $(this).val($(this).attr("min"));
     }
});

相关文章：