<< 國外 Smarty 新書 | 回blog首頁 | 微軟推出 Web Designer >>

2006年03月20日

如何尋找陣列中重複的值

不曉得你有沒有遇過一種情況，在一個表單中如果有多個重複的文字欄位時，在送出表單資訊時，要檢查這些文字欄位中的資料是否重複？

這裡我介紹一個簡單的方法，至於要怎麼用，就看大家的創意囉。


首先，我們要到以下網站去下載一個叫做 prototypes.js 的 JavaScript 工具包。

Usefull prototype methods for JavaScript

這個工具包會替 JavaScript 中 String 、 Array 等物件類別加上一些常用卻沒有內建的功能，像是 trim 字串函式， exists 陣列函式等。在這裡，我們會用到它的一些陣列函式。

註：還有一個名稱很類似的 prototype.js ，不過兩者做的事情有差別。 prototype.js 主要是一個小型的 JavaScript 動態網站框架，包含 AJAX 並加強許多物件的延伸功能。

要比對重複的陣列值，主要的概念就是搜尋整個陣列，當指標停留在某一個陣列元素時往前比對。如果前面的元素裡有和現在這個元素一樣的值的話，就表示重複；反之則在往下走。

有點看不太懂？那看看範例先。假設我們的表單中有五個文字欄位，名稱 (name) 皆為 sid 。而在表單送出的同時，利用 onsubmit 來呼叫 checkForm 函式。： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>找出重複值</title>
<script type="text/javascript" src="prototypes.js"></script>
</head>
<body>
<script type="text/javascript">
<!-- <![CDATA[
function checkForm() {
  // 取得所有名為 sid 的文字欄位
  var grp_sid = document.getElementsByName('sid');
  // 建立一個檢查用的空陣列
  var chk_sid = new Array();
  // 將文字欄位陣列的值放到檢查用的陣列
  for (var i = 0; i < grp_sid.length; i ++)
    chk_sid.push(grp_sid[i].value.trim());
  // 利用 slice 函式比對是否有重複值
  for (var i = 0; i < chk_sid.length; i ++) {
    if ('' != chk_sid[i]) {
      if (i > 0 && chk_sid.slice(0, i).exists(chk_sid[i])) {
        alert('請勿重覆輸入相同的值！');
        // 出現重複值時，停留在對應的文字欄位上
        grp_sid[i].focus();
        return false;
      }
    }
  }
  // 注意：正式送出時要改為 return true;
  return false;
}
// ]]> -->
</script>
<form name="form1" method="post" action="" onsubmit="return checkForm();">
<input type="text" name="sid" id="sid_1" /><br />
<input type="text" name="sid" id="sid_2" /><br />
<input type="text" name="sid" id="sid_3" /><br />
<input type="text" name="sid" id="sid_4" /><br />
<input type="text" name="sid" id="sid_5" /><br />
<input type="submit" value="檢查" />
</form>
</body>
</html>

在 checkForm 函式裡，先利用 document.getElementsByName 來取得 sid 元素陣列，再將它們的值一個一個置入暫存的陣列中。然後我們就可以透過檢查這個暫存陣列，以達到比對的目的。

註：在這裡使用純數值數列做比對，會比使用物件陣列來比對容易得多。

在搜尋陣列時，先跳過第一個陣列元素，因為在它前面也沒什麼可以比對的。接下來輪到第二個元素時，我利用 JavaScript 內建的 slice 陣列函式，取得第二個元素以前的陣列值。因為 slice 陣列函式所回傳的也是一個陣列，所以我們再利用 prototypes.js 的 exists 函式去找出 slice 函式傳回的陣列中，是否有和第二個元素相同的值。假如找到的話，就停止比對，顯示錯誤訊息。如果沒有，就再往下找，直到整個暫存陣列都被找完。

執行畫面如下：

執行畫面

這個方法我常用在活動專案上，例如推薦活動的姓名和 Email 判斷等。


Posted by jaceju at 樂多Roodo! │21:42 │回應(6) │引用(0) │JavaScript
樂多分類：網路/3C 共同主題：Java/JavaScript 工具：加入樂多書籤│編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/1288864
回應文章
我的做法是，先排序，然後開始比對
arr[0]==arr[1]
arr[1]==arr[2]
arr[2]==arr[3]
這樣只要比對 arr count -1
次就可以完成
如果資料很多的話，效能會好很多 ^^
Posted by rsii at 2006年03月23日 11:16
嗯，是不錯的方法，如果能夠自動化會更棒。
Posted by jaceju at 2006年03月25日 18:08
回rsii：
如果arr[0]==arr[3]就漏了沒檢查，雖然快，但是沒有把所有的可能考慮進去，要注意一下。
Posted by Johnny at 2006年05月29日 14:18
不錯喔， Johnny 把一些盲點指出來了，但是注意 rsii 有說要先排序。所以我覺得還是實測一下會比較好。
Posted by jaceju at 2006年05月29日 14:34

請問如果我用的是

這樣的表格我的sid是一個陣列
sid要怎麼改呀?

謝謝
Posted by wenzen at 2008年11月27日 21:30

不好意思我用的是這樣
input type='text' name='sid[$row[stuno]]' value='$row[playerid]'
我要比較$row中有相同的值
sid是一個陣列
Posted by wenzen at 2008年11月27日 21:32
  


回最上方