javascript - 使用正则表达式验证 keyup 事件的用户输入

Question

我正在尝试使用正则表达式验证用户的输入，这是我的代码

$('input[name="payment_rate"]').keyup(function(){
    var data = $(this).val();
    var regx = /^[0-9]+$/;

    console.log( data + ' patt:'+ data.match(regx));

    if( data.match(regx) ){
        $('.amt_err').fadeOut('slow');
    }
    else{
        $('.amt_err')
            .text('only Numeric Digits(0 to 9) allowed!')
            .css({'color':'#fff', 'background':'#990000', 'padding':'3px'});
    }
});

这是 html 部分:

<input type='text' class="txtbox" name='payment_rate' size='8'>&nbsp;<span class="amt_err"></span>

我只想要数字，但我的代码只在第一次工作。我的意思是，如果我输入任何逗号或字母字符，就会显示错误。但是，如果我用反斜杠删除相同的内容，然后再次输入逗号或数字以外的其他内容，则不会显示错误，我不知道代码中的错误在哪里？

请帮我找出错误..

Answer 1

第一次正则表达式匹配(即内容“有效”)时，错误消息元素将通过 .fadeOut() 隐藏。在随后的错误中，消息和 CSS 被修改，但元素不变得可见。

以下作品:

 $('input[name="payment_rate"]').keyup(function(){
    var data = $(this).val();
    var regx = /^[0-9]+$/;

    console.log( data + ' patt:'+ data.match(regx));

    if ( data === '' || data.match(regx) ){
        $('.amt_err').fadeOut('slow');
    }
    else {
        $('.amt_err')
            .text('only Numeric Digits(0 to 9) allowed!')
            .css({'color':'#fff', 'background':'#990000', 'padding':'3px'})
            .fadeIn('fast');
    }
});

此外，错误消息隐藏在零长度字符串(即空)中。不确定是否需要，但我猜是这样。请参阅http://jsbin.com/uhelir/edit#javascript,html

此外，请查看 http://www.zurb.com/playground/jquery-text-change-custom-event ，一个 jQuery 插件，提供“文本更改”事件，这是确定用户何时完成输入的更好方法(如果文本没有更改，则不会触发，从而减少处理开销)。