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事件＆amp;检查字符数，而不是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

如果您希望仅在用户点击时显示该行为，我建议您使用焦点输出事件。如果用户使用标签输出功能，这也会被捕获。

这是一个例子。 fiddle

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

的Javascript

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

验证10位数javascript的字段

2 个答案: