验证10位数javascript的字段

Question

我有一个下面的代码用于一个字段，必须填写准确的10个数字

 $('#input-payment-egn').on('input', function() { var input=$(this); var is_egn=input.val(); $("div.wrong-egn").hide(); var re = /^\\d{10}$/; var is_egn=re.test(input.val()); if(is_egn<10){ $("div.wrong-egn").show(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="leasingform"> <div class="form-group required" style="padding-top: 15px;"> <label class="control-label" for="input-payment-egn"><?php echo $text_egn; ?></label> <input type="text" maxlength="10" name="egn" value="" placeholder="Въведете вашето ЕГН" id="input-payment-egn" class="form-control"/> </div> <div class="text-danger" id="wrong-egn" style="display: none;">Въведете валидно ЕГН !</div> </form> 

用户输入数字后，我想在用户单击页面上其他位置时验证输入！ 我使用了正则表达式（我认为还可以）。您能帮我吗？ 谢谢！

Answer 1

在这里，您将获得示例解决方案https://jsfiddle.net/3bgpdp7v/1/

 $('#input-payment-egn').keyup(function(e){ if($(this).val().length === 10){ e.preventDefault(); $('#wrong-egn').slideUp(); } else { $('#wrong-egn').slideDown(); } }); 

 #wrong-egn{ display: none; font-size: 12px; color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" maxlength="10" name="egn" value="" placeholder="Въведете вашето ЕГН" id="input-payment-egn" class="form-control"/> <div id="wrong-egn">Please provide 10digit number.</div> 

我使用jQuery keyup事件并检查字符数，而不是regex 。

另一种方式这是另一种解决方案https://jsfiddle.net/3bgpdp7v/2/

 $('#input-payment-egn').keyup(function(e){ if($(this).val().length === 10) e.preventDefault(); }).focusout(function(){ if($(this).val().length === 10){ $('#wrong-egn').slideUp(); } else { $('#wrong-egn').slideDown(); } }); 

 #wrong-egn{ display: none; font-size: 12px; color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" maxlength="10" name="egn" value="" placeholder="Въведете вашето ЕГН" id="input-payment-egn" class="form-control"/> <div id="wrong-egn">Please provide 10 digit number.</div> 

这将在focusout时显示消息。

希望这会帮助你。

Answer 2

如果您希望仅在用户单击时显示该行为，则建议使用focusout事件。 如果用户使用跳出功能，这也会捕获。

这是一个例子。 小提琴

<input type="text" maxlength="10" name="egn" value="" placeholder="Въведете вашето ЕГН" id="input-payment-egn" class="form-control"/>

Java脚本

$('#input-payment-egn').focusout(function(e){
 if($(this).val().length < 10){
  $('#wrong-egn').css('display','block');
 }else{
  $('#wrong-egn').css('display','none');
 } 
});