jQuery在粘贴后验证数字

时间:2010-11-06 12:57:17

标签: jquery validation copy-paste paste numeric

我知道如何验证字段的数值,但是如果将无效字符粘贴到字段中,如何验证字段。通常我们有一个数字字段,然后是一个操作按钮,当单击操作按钮时,数字字段可能不会触发模糊事件。在这种情况下,你如何强制(重新)验证?您是否在操作按钮的单击事件中再次执行此操作,或者在那里有更优雅的解决方案?

3 个答案:

答案 0 :(得分:3)

没有真正回答关于粘贴的问题,而是提供替代方案:您可以订阅表单的submit处理程序并在那里执行验证。更优雅的是使用jquery validation plugin来完成订阅工作,这样您只需要定义规则和错误消息:

$(function() {
    $('#myform').validate({
        rules: {
            someFieldName: {
                required: true,
                number: true
            }
        },
        messages: {
            someFieldName: {
                required: 'please enter a value',
                number: 'please enter a valid number'
            }
        }
    });
});

答案 1 :(得分:2)

我使用了这种验证....检查粘贴的文本,如果它包含字母,则为用户显示错误,然后在延迟后清除该框,以便用户检查文本并进行适当的更改。

$('#txtbox').on('paste', function (e) {
    var $this = $(this);
    setTimeout(function (e) {
        if (($this.val()).match(/[^0-9]/g))
        {
            $("#errormsg").html("Only Numerical Characters allowed").show().delay(2500).fadeOut("slow");                       
            setTimeout(function (e) {
                $this.val(null);
            },2500);
        }                   
    }, 5);
});

答案 2 :(得分:0)

我使用粘贴事件来触发keyup事件,因为只有使用粘贴事件,我才能以某种方式获取输入,但是我无法操纵给定的输入。这是我找到方法的方式(顺便说一句,我将其用于字母验证,但是您也可以使用输入类型=“数字”来验证数字)-

$(".NumberValidateOnPaste").on('paste', function(e) {
  $(e.target).keyup();
});

$('.NumberValidateOnPaste').on('keyup',function(e){
    var value = $(this).val();
    var result = value.match(/^\d*$/);
    
    if(result == null){
      $(this).val('');
    }
    
});
<label for="Pin Code">Pin Code</label>
                <input type="text" name="pin_code" class="form-control NumberValidateOnPaste">
                
 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>