Question

我希望用户将最少10个字符添加到html text中。为此我已经在文本框的onblur上设置了验证。下面是html及其js代码

HTML

<input type="text" class="form-control" id="txtStoreSiteAsstMangrMob"  maxlength="10" onblur="checkLength(this)"  onkeypress="return IsNumeric4(event);" ondrop="return false;" onpaste="return false;" />

JAVASCRIPT

function checkLength(el) {    
if (el.value.length != 10) {
    alert("Minimum 10 numbers are accepted");        
}  }

这里的问题是验证正在正常启动，但即使单击“确定”也会重复显示该消息。

为什么它会像这样发生。请帮忙

Answer 1

你使用el.value.length != 10，这意味着如果长度大于10，那么如果小于10则显示消息，那么也会显示消息。

在您的代码中，如果输入的长度恰好是10条消息，则消息将不会显示。

但你要检查长度是否＆lt; 10然后显示消息，如果超过10则不显示任何内容。

所以我觉得更好用：

el.value.length < 10

Answer 2

function checkLength(el) {
  if (el.value.length != 10) {
    alert("Minimum 10 numbers are accepted");
  }
}

<html>

<body>
  <input type="text" class="form-control" id="txtStoreSiteAsstMangrMob" maxlength="10" onblur="checkLength(this)" onkeypress="return IsNumeric4(event);" ondrop="return false;" onpaste="return false;" />
</body>

</html>

你的代码对我来说很好..请再次检查.. 根据我的理解，如果我们使用onBlur函数使用输入字段验证，焦点可能会让您遇到此类问题。

Answer 3

在多个输入上使用onblur事件处理程序可能会导致相同的结果，结果可能会因浏览器而异。

选项1：避免在onblur上使用js alert（）。

选项2：将基本验证放在表单提交而不是输入模糊。

Answer 4

当你想要重新聚焦时，这是一种让它工作的方法

demo https://codepen.io/jacobgoh101/pen/PeLaRw?editors=1011

将状态保存在elem的数据属性中，例如data-should-alert，在提醒一次后将其设置为false，以便该功能可以决定再次提醒的位置。一旦用户开始输入内容，就将其设置为true。

function checkLength(el) {
  if(el.getAttribute('data-should-alert')==='false') return;
  if (el.value.length != 10) {
    alert("Minimum 10 numbers are accepted");
    el.setAttribute('data-should-alert', 'false');
    el.focus();
  } 
}

function handleKeydown(el) {
    el.setAttribute('data-should-alert', 'true');
}

Answer 5

尝试以下小提琴演示，它将清除您的要求：

HTML：

 <input type='text' id='text'/>

JS：

function textLength(value){
  var maxLength = 10;
  if(value.length > maxLength) return false;
  return true;
}

document.getElementById('text').onkeyup = function(){
 if(!textLength(this.value)) alert('text is too long!');
}

Setting min length in input text is giving repetitive alert message

我在这里找到了：

Counting input chars - use onkeyup or onkeydown?

在输入文本中设置最小长度给出重复的警报消息

5 个答案: