番号と文字でJqueryを使用したフォーム検証

Question

正しいパーツ番号が入力されていることを確認するための検証を行います。各部分はCAPSのMRで始まり、その後に[SPACE]が続きます。例えば（MR 123）

問題は、jqueryを使用してこれを検証する方法がわからない場合です。

部品番号は常にMRで始まります。

   var type = $("input#type").val(); 

         // Check a that a tank type has been entered. 
         if(type.length < 5 && type.not().contain("MR")){ 

           $("#error_upload").html("Please enter the tank number in a format MR XXX."); 
           $("#type").css({borderColor:'red'}).focus();          
           $("name,#file").css({borderColor:'#ccc'}); 
           return false; 

         } 

助けがあれば助かります。

Answer 1

正規表現を使用することをお勧めします。

if (type.match(/^MR\s[0-9]{3}$/){ 
... 
} 

基本的に、それはその後、MRのためのスペース（\s）、その後、3つの数字（[0-9]{3}）が見えます。他に何かが現れると、falseを返します。

Answer 2

if (/^MR \d{3}$/.test(subject)) { 
    // Correct tank number format 
} else { 
    // Incorrect tank number format 
} 

これは、入力された値が常にのみMR + [SPACE] + 3 digitsであり、唯一そのことを保証します。

Answer 3

ここにはいくつかのルートがあります。

1. 一つのようなものを統合あなたはあなたのコードは、おそらく以下の

   var type = $("input#type").val(); 
   
   // Check a that a tank type has been entered. 
   if(!/^MR \d{3}$/.test(type)){ 
   
       $("#error_upload").html("Please enter the tank number in a format MR XXX."); 
       $("#type").css({borderColor:'red'}).focus();          
       $("name,#file").css({borderColor:'#ccc'}); 
       return false; 
   
   } 
   

2. のようなものを見たいでしょう。このように、あなたの検証を書き込むことによって

   • を続けますjQuery Validateへの上記のように、他の場所で検証が必要であると仮定しているので、

   • 3桁しか入力せずに'MR ' + typeに追加して入力を簡略化すると、これらのすべてにMRとスペースが必要なので、なぜユーザーに入力するように依頼するのですか？

     var num = $("input#type").val() 
     , type; 
     
     // Check a that a tank type has been entered. 
     if(!/^\d{3}$/.test(num)){ 
     
         $("#error_upload").html("Please enter the tank number with only digits."); 
         $("#type").css({borderColor:'red'}).focus();          
         $("name,#file").css({borderColor:'#ccc'}); 
         return false; 
     
     } 
     else { 
         type = 'MR ' + num; 
     } 
     

   • この<input type="text" class="required digits" maxlength="3" minlength="3" />ような入力を有することにつながるステップ2及び3を組み合わせ。これにより、データの入力が簡単になり、単純な検証ロジックを心配する必要がなくなります。これは私の好きな選択です。

   • 入力マスクを使用して、ユーザーが間違いを犯さないようにしますが、これは最も「侵入的」です。