Question

当用户离开文本表单时，我尝试使用表单验证。该代码实际上按我的意愿运行，但是问题是我无法验证我输入的特定表格。当我离开表格名称时，在我有机会输入之前，表格编号也会显示错误。

当用户离开表单文本时，如何将每个输入的错误消息拆分为全局函数？

$(document).ready(function(){
  $('input[type=text]').on('blur', function(){
    $(this).each(function(){
      nama ($('#nama').val());
      no($('#nomor').val());
    });
  });
  
  
  function nama(myname){
    if(!myname){
    $('<span>name cannot be empty</span>').insertAfter('#nama'); 
    }
  }
  
  
    function no(mynomor){
    if(!mynomor){
      $('<span>number cannot be empty</span>').insertAfter('#nomor');  
    }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>name</p>
<input type="text" id='nama'>
<br>
<p>number</p>
<input type="text" id='nomor'>

Answer 1

通过使用HTML本身中的错误消息span，然后基于span元素{{1}选择input元素，可以简化代码以实现隐藏显示}。像这样：

id

$(document).ready(function() {
  $('input[type=text]').on('blur', function(e) {
    var id = this.id;
    if (e.target.value) {
      $('#' + id + 'span').hide();

    } else {
      $('#' + id + 'span').show();

    }
  });
});

.error-span {
  display: none;
}

Answer 2

我建议让错误消息显示在HTML中，但不要显示该错误消息，然后在发生blur事件时，请检查该字段是否为空，如果为空，则使用错误消息并显示它。

我创建了一个函数，当发生模糊时，每个input[type=text]都会调用该函数，该函数将检查/验证字段

$(document).ready(function(){
  $('input[type=text]').on('blur', function(){
    validateField(this)
  });
  
  function validateField(field){
    let value = field.value;
    if (value.trim().length < 1 || value === null){
      $(field).siblings(".invalid-msg").removeClass("not-error").addClass("error-show")
    }else{
      $(field).siblings(".invalid-msg").removeClass("error-show").addClass("not-error")
    }
  }
  
});

.error-show{
  display: inline-block;
  color: red;
}

.not-error{
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>name</p>
  <input type="text" id='nama'> <span class="not-error invalid-msg">Name can't be empty</span>
</div>
<br>
<div>
  <p>number</p>
  <input type="text" id='nomor'> <span class="not-error invalid-msg">Number can't be empty</span>
</div>

所有输入文字模糊的jquery验证

2 个答案: