如何使用正则表达式和JavaScript强制用户在输入字段中输入特定模式

Question

我承认，尽管知道正则表达式的功能，但我从未对其进行过探索。 并让我回想起。 我试图让用户在输入文本中输入模式P99999999，其中P是强制性的，而99999999可以采用任何数字（不是字母）。 我正在触发键盘输入，输入字段通过样式进行了大写，到目前为止，这是我所做的（我知道太少了）。

inpt.value = $.trim( inpt.value );
if( inpt.value.indexOf( 'P' ) != 0 )
    inpt.value = inpt.value.replace(/[A-Z]/g, '');

经过一番探索，我想出了这个

[P]+[0-9]+(?:\.[0-9]*)?

我不知道如何对此进行验证。 这是由在线工具生成的。 我知道应该没那么难。 任何帮助。

Answer 1

尝试这个：

P[0-9]{8}

那是P，然后是八次。

如果后面跟任意数字的P有效，请尝试

P[0-9]+

那是一个P，然后是至少一个数字。

为了确保这是他们输入的全部内容，请添加^和$（如注释中所述）：

^P[0-9]+$

^是“输入开始”，而$是“输入结束”。

因此，您的最终代码可能类似于：

<input type="text" />
<div class="fail" style="display: none;">Fail!</div>

和

$("input").keyup(function() {
    var patt=/^P[0-9]+$/g;
    var result=patt.test($(this).val());
    if (result) {
        $(".fail").hide();        
    } else {
        $(".fail").show();        
    }
});

http://jsfiddle.net/fuMg4/1/

最后，请确保同时在服务器端进行检查。 绕过客户端验证很容易。

该工具非常方便： http : //gskinner.com/RegExr/

Answer 2

[已更新，以解决流输入（按住键）问题]

干得好

regex [看起来可能不合常规，因为可能没有（*）数字，但是再想一想，它是实时验证，而不是最终结果验证]：

^P\d*$

代码[编辑： 简化 ]：

    $('input').on('change keyup keydown',function(){
        var txt = $(this).val();
        $(this).val(/^P\d*$/.test(txt)&txt.length<10?txt:txt.substring(0,txt.length-1));
    });

演示

Answer 3

为什么不使用第三方插件，例如jQuery Mask Plugin ...

此类要求已在javascript中实现。 您正在尝试重新创建轮子。

Answer 4

使用模式属性

http://cssdeck.com/labs/n8h33j1w

<input type="text" required pattern="^P[0-9]+$" />

input:invalid {
  background: red;
}

input:valid {
  background: green;
}

请注意，较旧的浏览器将需要使用polyfill（即IE），因为这是一个相对较新的属性。