需要验证的“xxx-xxxxxxx-yy”输入字段

Question

我正在尝试验证数字格式，并且数字应该在输入时自动替换为字符。

格式为：XXX-XXXXXXX-YY和在另一场 “XX-XX-XX-XXX-XX”

我的代码：

$('#id_number').on("keypress keyup blur", function(event) { 
     $('span.error-keyup-1').hide(); 
     var inputVal = $(this).val(); 
     $(this).val($(this).val().replace(/[^0-9\.]/g, '')); 
     var numericReg = /^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/; 
     if(!numericReg.test(inputVal)) { 
      $(this).after('<span class="error error-keyup-1">Numeric characters only.</span>'); 
     } 
    }); 

我想出直到允许数字。但用户输入时用数字替换字符变得困难。

有人可以帮助我。有没有任何正则表达式？

$(document).ready(function() { 
 
\t $('#id_number').on("keypress keyup blur", function(event) { 
 
\t \t $('span.error-keyup-1').hide(); 
 
\t \t var inputVal = $(this).val(); 
 
\t \t //$(this).val($(this).val().replace(/[^0-9\.]/g, '')); 
 
\t \t var numericReg = /^(?:\d{3}(?:-\d{7})?(?:-\d{2})?|\d{2}(?:(?:-\d{2}){0,2})?(?:-\d{3})?(-\d{2})?)$/gm; 
 
\t \t if(!numericReg.test(inputVal)) { 
 
\t \t \t $(this).after('<span class="error error-keyup-1">Numeric characters only, and pattern should match either "xxx-xxxxxxx-yy" or "xx-xx-xx-xxx-xx".</span>'); 
 
\t \t } 
 
\t }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="inp-wrap"> 
 
<input type="text" class="form-control" id="id_number" name="id_number" maxlength="20" required> 
 
</div>

Answer 1

我认为你需要将代码分成2个事件：blur和keyup/keypress。

经常用于blur表达验证整个输入：用于keyup/keypress事件，可允许用户输入任意位数和“连字符位数”基团

^(?:\d{3}-\d{7}-\d{2}|\d{2}(?:-\d{2}){2}-\d{3}-\d{2})$) 

正则表达式：

^(?!.*-{2})\d+(?:-(?:\d+)?)*$ 

Answer 2

此正则表达式将工作/^\d{1,3}-\d{0,7}-\d{0,2}|^\d{1,3}-\d{0,7}|^\d{1,3}/。此外，我会用一个超时，所以你只有一次的用户已经停止打字检查和替换字符

$(function() { 
 
    var timeOut = 0; 
 
    $("#test").on('keyup blur', function() { 
 
     var e =$(this); 
 
     // cancel looking, the user typed another character 
 
     clearTimeout(timeOut); 
 
     // set a timeout, when user doesn't type another key 
 
     // within the time set, the function is called 
 
\t \t timeOut = setTimeout(function() { 
 
\t \t \t stopptedTyping(e); 
 
\t \t }, 300); // change time as needed 
 
    }); 
 

 
}); 
 

 
function stopptedTyping(e){  
 
    e.val(e.val().match(/^\d{1,3}-\d{0,7}-\d{0,2}|^\d{1,3}-\d{0,7}|^\d{1,3}/)); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="test"/>

Answer 3

看看..另一种方法..和完美的作品！ :)

$(document).ready(function() { 
 
\t $('#id_number').on("keyup blur", function(event) { 
 
\t \t $('span.error-keyup-1').hide(); 
 
\t \t var inputVal = $(this).val(); 
 
     var length = inputVal.length; 
 
     var letters = /[^0-9-]/gm; 
 
\t \t 
 
     if(letters.test(inputVal)) { 
 
\t \t $(this).val($(this).val().replace(/[^0-9-]/g, '')); 
 
    } 
 
     var buff = "xxxxxxxxxxxxxxx"; 
 
     inputVal = inputVal+buff; 
 
     inputVal = inputVal.substr(0,15); 
 
\t \t var numericReg = /^([x\d]{3}[x-][x\d]{7}[x-][x\d]{3})$|^(([x\d]{2}[x-]){3}[x\d]{3}[x-][x\d]{2})$/gm; 
 
\t \t if(!numericReg.test(inputVal)) { 
 
      $(this).val(inputVal.substr(0,length-1)) 
 
\t \t \t $(this).after('<span class="error error-keyup-1">Numeric characters only, and pattern should match either "xxx-xxxxxxx-yy" or "xx-xx-xx-xxx-xx".</span>'); 
 
\t \t } 
 
\t }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="inp-wrap"> 
 
<input type="text" class="form-control" id="id_number" name="id_number" maxlength="20" required> 
 
</div>