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插件，它提供了一个'文本更改'事件，这是确定用户何时完成输入的更好方法（并且如果文本不会触发它没有改变，减少了处理开销。）

Answer 2

错误后隐藏它时，您没有显示.amt_err。你最初没有看到它，因为它是空的。也许你想要：

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'})
        .fadeIn('slow'); // <- fade in here
}

Here's a jsfiddle

Answer 3

变化：

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

为：

else{
    $('.amt_err')
        .show() //Or fadeIn()
        .text('only Numeric Digits(0 to 9) allowed!')
        .css({'color':'#fff', 'background':'#990000', 'padding':'3px'});
}

使用fadeOut()隐藏范围后，您需要使用show()或fadeIn()

再次显示该范围

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

3 个答案: