html入力の特定の番号を禁止しますか？ここ

はhtmlコードhtml入力の特定の番号を禁止しますか？ここ

</div> 
    <div class="col-lg-6 col-md-6 form-group"> 
     <label for="inputBookNo">Winning Book No</label> 
     <input type="number" min="1" class="form-control" name="book_no" placeholder=" Winning Book Number" required> 
    </div> 
    <div class="col-lg-6 col-md-6 form-group"> 
     <label for="inputBookNo">Consolation Prize 1</label> 
     <input type="number" min="1" class="form-control" name="book_no_con1" placeholder="Consolation Prize 1 Book Number" required> 
    </div> 
    <div class="col-lg-6 col-md-6 form-group"> 
     <label for="inputBookNo">Consolation Prize 2</label> 
     <input type="number" min="1" class="form-control" name="book_no_con2" placeholder="Consolation Prize 2 Book Number" required> 
    </div> 
    <div class="col-lg-6 col-md-6 form-group"> 
     <label for="inputBookNo">Consolation Prize 3</label> 
     <input type="number" min="1" class="form-control" name="book_no_con3" placeholder="Consolation Prize 3 Book Number" required> 
    </div> 
    <div class="col-lg-6 col-md-6 form-group"> 
     <label for="inputBookNo">Consolation Prize 4</label> 
     <input type="number" min="1" class="form-control" name="book_no_con4" placeholder="Consolation Prize 4 Book Number" required> 
    </div> 
</div>

である私は1つの要素のための入力を防ぐことができますとにかくあり帳いいえ（book_no）を獲得言う慰め賞1（book_no_con1）他の要素の入力と同じではないと言いますか？

つまり、Winning Book No、Consolation Prize 1-4の入力、つまりすべての要素が異なる数字になるようにフォームを実装したいと考えています。

出典

2016-07-24 Sapnesh Naik

はい、それは少しはJavaScriptを必要とします。 –

クライアント側では？あんまり。 100％確実になるためには、常にサーバー側で（ダブル）チェックする必要があります。イントラネット環境のように、ユーザーを信頼している場合を除きます。 – DanMan

@MueyiwaMosesIkomiあなたはこれに必要なjavascriptコードで私を助けることができますか？ –

ここに必要なものの実例があります。私はすべての入力のIDを追加し、私は本の配列が重複値を持っているかどうかをチェックする単純なJavaScriptコードを書いた。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
</div> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Winning Book No</label> 
 
     <input type="number" min="1" class="form-control" id='book' name="book_no" placeholder=" Winning Book Number" required> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Consolation Prize 1</label> 
 
     <input type="number" min="1" class="form-control" id='book1' name="book_no_con1" placeholder="Consolation Prize 1 Book Number" required> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Consolation Prize 2</label> 
 
     <input type="number" min="1" class="form-control" id='book2' name="book_no_con2" placeholder="Consolation Prize 2 Book Number" required> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Consolation Prize 3</label> 
 
     <input type="number" min="1" class="form-control" id='book3' name="book_no_con3" placeholder="Consolation Prize 3 Book Number" required> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Consolation Prize 4</label> 
 
     <input type="number" min="1" class="form-control" id='book4' name="book_no_con4" placeholder="Consolation Prize 4 Book Number" required> 
 
    </div> 
 
    <button id='checkFields'>Check Fields</button> 
 
</div> 
 
<script> 
 
    function hasDuplicates(array) { 
 
    var valuesSoFar = Object.create(null); 
 
    for (var i = 0; i < array.length; ++i) { 
 
     var value = array[i]; 
 
     if (value in valuesSoFar) { 
 
      return true; 
 
     } 
 
     valuesSoFar[value] = true; 
 
    } 
 
    return false; 
 
    } 
 

 
    document.getElementById('checkFields').onclick=function() { 
 
     var books = new Array(); 
 
     var book = document.getElementById("book").value; 
 
     var book1 = document.getElementById("book1").value; 
 
     var book2 = document.getElementById('book2').value; 
 
     var book3 = document.getElementById('book3').value; 
 
     var book4 = document.getElementById('book4').value; 
 
     books.push(book); 
 
     books.push(book1); 
 
     books.push(book2); 
 
     books.push(book3); 
 
     books.push(book4); 
 
     if(hasDuplicates(books)) 
 
      alert("No duplicates allowed!"); 
 
     else 
 
      alert("Test passed"); 
 
    } 
 

 
</script> 
 
</body> 
 

 
</html>

出典

2016-07-24 09:47:36

私は本のために別のvarを追加し（勝利本no）、それを押して、すべてが大丈夫だった。ありがとうございました！ –

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Winning Book No</label> 
 
     <input type="number" min="1" class="form-control" name="book_no" placeholder=" Winning Book Number" required> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Consolation Prize 1</label> 
 
     <input type="number" min="1" class="form-control" name="book_no_con1" placeholder="Consolation Prize 1 Book Number" required> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Consolation Prize 2</label> 
 
     <input type="number" min="1" class="form-control" name="book_no_con2" placeholder="Consolation Prize 2 Book Number" required> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Consolation Prize 3</label> 
 
     <input type="number" min="1" class="form-control" name="book_no_con3" placeholder="Consolation Prize 3 Book Number" required> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Consolation Prize 4</label> 
 
     <input type="number" min="1" class="form-control" name="book_no_con4" placeholder="Consolation Prize 4 Book Number" required> 
 
    </div> 
 
    
 
    <button onclick="myFunction()">Try it</button> 
 

 
    <script> 
 
     function myFunction() { 
 
      var book_no = []; 
 
      book_no[0] = document.getElementsByName("book_no")[0].value; 
 
      book_no[1] = document.getElementsByName("book_no_con1")[0].value; 
 
      book_no[2] = document.getElementsByName("book_no_con2")[0].value; 
 
      book_no[3] = document.getElementsByName("book_no_con3")[0].value; 
 
      book_no[4] = document.getElementsByName("book_no_con4")[0].value; 
 

 
      if (hasDuplicates(book_no)) { 
 
       alert("please make sure that all the values are different."); 
 
      } else { 
 
       alert("Test passed."); 
 
      } 
 

 
      function hasDuplicates(array) { 
 
       return (new Set(array)).size !== array.length; 
 
      } 
 
     } 
 
    </script> 
 

 
</body> 
 

 
</html>

出典

2016-07-24 09:51:12

これは良い答えですが、JavaScriptとES6に精通している人にはわかりますが、OPと今後この問題に遭遇する人は理解できそうにありません。してください：あなたのコードを学習している人に説明する時間を取るか、または不完全な理解を持ってください。 –

html入力の特定の番号を禁止しますか？ここ

答えて

関連する問題