Jqueryイベントを使用してデータを入力する際に​​入力を検証する方法は？

Question

Jqueryイベントを使用してデータを入力する際に​​入力を検証する方法は？

$("#lname").blur(function() { 
     if ($("#lname").val().trim().match(/^[a-zA-Z ]+$/)) { 
      $("#lname").css({"border":"1px solid #cecece"}); 
      $("#error_lname").css("display","none"); 
     } 
     else{ 
      $("#error_lname").css("display","block"); 
     } 
    }); 

Answer 1

あなたの代わりにblurのinputイベントを使用して、ユーザーの種類として検証する場合：

$("#lname").on('input', function() { 
    if ($("#lname").val().trim().match(/^[a-zA-Z ]+$/)) { 
     $("#lname").css({"border":"1px solid #cecece"}); 
     $("#error_lname").css("display","none"); 
    } 
    else{ 
     $("#error_lname").css("display","block"); 

    } 
}); 

ただし、あなたがcss()の使用を避け、代わりに追加する必要があり、ベストプラクティスに従うことがあることに注意すべきです/外部スタイルシートで定義されていたクラスを削除し、このような何か：

$("#lname").on('input', function() { 
    var $el = $(this); 
    var valid = $el.val().trim().match(/^[a-zA-Z ]+$/); 
    $el.toggleClass('invalid', !valid); 
    $el.next('.error-msg').toggle(!valid); 
}); 

.invalid { border: 1px solid #CECECE; } 

上記は、検証するinputが、.error-msgのクラスを持つエラーメッセージである次の兄弟を持っていることを前提としています。このようにロジックを編成すると、#error_lnameセレクタによって各コントロールに結びつけるのではなく、検証ロジックを簡単に汎用化することができます。

Answer 2

私はちょうどあなたがonkeyupイベントも同じ効果を得るために使用することができることを追加したいと思います。

$("#lname").on('keyup', function() { 
 
    var $el = $(this); 
 
    var valid = $el.val().trim().match(/^[a-zA-Z ]+$/); 
 
    $el.toggleClass('invalid', !valid); 
 
    $el.next('.error-msg').toggle(!valid); 
 
});

.error-msg{ 
 
    display:none; 
 
    color:red; 
 
} 
 

 
.invalid{ 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="lname">Last Name:</label> 
 
<input type="text" id="lname"> 
 
<span class="error-msg">Error message here ...</span>