iT邦幫忙

0

如何使用 js 檢查所有 input 欄位的值不能相同

chan15 2011-09-26 14:33:5813900 瀏覽
<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>repaet</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(function() {
	$('#btn').click(function() {
		var $arr = new Array(),
			$check = true,
			$fields = $('[name="tt"]');
		
		// 將值存到陣列裡面
		$fields.each(function() {
			$arr.push($(this).val());
		});
				
		// 陣列長度
		var $length = $arr.length;
		for ($i = 0; $i < $length; $i++) {
			var $newArr = $arr,
				$arrRemove = $newArr.splice($i, 0);
			if ($.inArray($fields.eq($i).val(), $newArr) != -1) {
				$check = false;
			}
		}
		
		if (!$check) {
			alert('輸入重複');
		} else {
			alert('送出');
		}
	});
});
</script>



<input type="input" name="tt" value="1" />
<input type="input" name="tt" value="2" />
<input type="input" name="tt" value="3" />
<input type="button" name="btn" id="btn" value="btn" />

我本來的想法是將直存進陣列,然後用迴圈將每一層屬於該陣列位置的值用 splice 抽掉
再將該迴圈輪到的值與剩下的陣列比對是否重複,有的話則紀錄有重複
很奇怪的是,我特地宣告另一個陣列 var $newArr = $arr,使用 $newArr 來做 splice 以求不影響原本的陣列
但我下了 $arrRemove = $newArr.splice($i, 0) 以後,居然原本的 $arr 也會受影響
產生錯誤的結果,請問該怎麼解決?

2 個回答

2
ccutmis
iT邦研究生 5 級 ‧ 2011-09-26 16:04:54
最佳解答

表單元素的name重覆了,除了radio元素之外,一般的表單元素的name是應該不能重覆的。
另外我在原本的<input />裡面加入了class,這讓jQuery在取得元素內容時更簡單了,
例如<input type="input" name="txt1" class="txt1" />
,要取得它的值只要這樣寫: $('.txt1').val()
接著我用一個簡單的判斷來處理,邏輯是:
假如(txt1==txt2或txt2==txt3或txt3==txt1)則{
alert('輸入重複');
}否則{
alert('送出');

希望有幫助~!

&lt;pre class="c" name="code">

&lt;html xmlns="http://www.w3.org/1999/xhtml">

&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
&lt;title>repaet&lt;/title>
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">&lt;/script>
&lt;script>
$(function() {
	$('#btn').click(function() {
		if(($('.txt1').val()==$('.txt2').val())||($('.txt2').val()==$('.txt3').val())||($('.txt3').val()==$('.txt1').val())){
			alert('輸入重複');
		} else {
			alert('送出');
		}
	});
});
&lt;/script>



&lt;input type="input" name="txt1" class="txt1" value="1" />
&lt;input type="input" name="txt2" class="txt2" value="2" />
&lt;input type="input" name="txt3" class="txt3" value="3" />
&lt;input type="button" name="btn" id="btn" value="btn" />
看更多先前的回應...收起先前的回應...
chan15 iT邦新手 5 級 ‧ 2011-09-26 16:13:38 檢舉

name 可以重複吧,不然你 check box 跟 radio 怎麼弄,應該是 id 不能重複
假如要土法煉鋼我就不用問了 XD
今天有 10 個欄位就搞死你 XD

ccutmis iT邦研究生 5 級 ‧ 2011-09-26 16:43:46 檢舉

表單元素的name重覆了,除了radio元素之外,一般的表單元素的name是應該不能重覆的。

兄台有看過說明了嗎? name不重覆是因為form在傳送到另一個頁面時,如果name都一樣會導致其它問題,不是說一定不行,所以我有加上「應該」兩字,而不是「絕對」...OK?
10欄位就搞死你? 那100行以上的程式不就有人要尿褲子了~

ccutmis iT邦研究生 5 級 ‧ 2011-09-26 17:13:04 檢舉

上面的補充刪不掉...唉QQ"

&lt;pre class="c" name="code">
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">&lt;/script>
&lt;script>
$(function() {
	$('#btn').click(function() {
		var isRepeat=0;
		var tmpArr=new Array(); 
		//先將所有class為"needTest"的input值塞到tmpArr陣列
		$('input.needTest').each(function(index) {
			tmpArr.push($(this).val()); //
		});
		for(var ai=0;ai&lt;tmpArr.length;ai++){
			if(isRepeat==1) break;
			var tmpVar=tmpArr[ai];
			for(var aj=0;aj&lt;tmpArr.length;aj++){
				if(ai!=aj){
					if(tmpVar==tmpArr[aj]) isRepeat=1;
				}
			}
		}
		if(isRepeat==1){
			alert('輸入重複'); 
		} else {  
			alert('送出');
		}
	});
});
&lt;/script>
ccutmis iT邦研究生 5 級 ‧ 2011-09-26 17:14:46 檢舉
&lt;pre class="c" name="code">

&lt;input type="input" name="txt1" class="needTest" value="1" />
&lt;input type="input" name="txt2" class="needTest" value="2" />
&lt;input type="input" name="txt3" class="needTest" value="3" />
&lt;input type="input" name="txt4" class="needTest" value="4" />
&lt;input type="input" name="txt5" class="needTest" value="5" />
&lt;input type="input" name="txt6" class="needTest" value="6" />
&lt;input type="input" name="txt7" class="needTest" value="7" />
&lt;input type="input" name="txt8" class="needTest" value="8" />
&lt;input type="input" name="txt9" class="needTest" value="9" />
&lt;input type="input" name="txt10" class="needTest" value="10" />
&lt;br />
&lt;input type="button" name="btn" id="btn" value="btn" />

10欄位並不會搞死我...QQ~不管黑貓白貓,只要能捉到老鼠的就是好貓。程式同理可證。

chan15 iT邦新手 5 級 ‧ 2011-09-26 22:26:34 檢舉

你後來提出的 code 跟你一開始的土法煉鋼完全是兩回事…

chan15 iT邦新手 5 級 ‧ 2011-09-26 22:42:08 檢舉
&lt;pre class="c" name="code">&lt;script>
$(function() {
	$('#btn').click(function() {
		var $arr = new Array(),
			$fields = $('[name="tt"]'),
			$check = true;
			
		$fields.each(function() {
			$arr.push($(this).val());
		});
		
		var $length = $arr.length;
		
		// split 會影響原本的陣列,於是先把陣列轉為文字
		$arr = $arr.join(',');
		
		for (var $i = 0; $i &lt; $length; $i++) {
			var $arrNew = $arr.split(','),
				$arrRemove = $arrNew.splice($i, 1);
			if ($.inArray($fields.eq($i).val(), $arrNew) != -1) {
				$check = false;
			}
		}
		
		if (!$check) {
			alert('資料重複');
		} else {
			alert('送出');
		}
	});
});
&lt;/script>

提供我後來的解法

ccutmis iT邦研究生 5 級 ‧ 2011-09-27 00:01:30 檢舉

我只有一個重點就是能解決方法的方法…就是好方法。有解就好,恭喜~! Orz

ccutmis iT邦研究生 5 級 ‧ 2011-09-27 13:40:56 檢舉
&lt;pre class="c" name="code">

&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">&lt;/script>
&lt;script>
$(function() {
	$('#btn').click(function() {
		var isRepeat=false; var inputAll='';
		$('[name="tt"]').each(function(index) {
			var tmpArr=(index==0?null:inputAll.split('_'));
			if((index==0)?false:(($.inArray($(this).val(), tmpArr) == -1)?false:true)){
				isRepeat=true;return false;
			}
			inputAll+=(index==0?'':'_')+$(this).val();
		});
		if (isRepeat) {	alert('資料重複');
		}else{alert('送出');}
	});
});
&lt;/script>

&lt;input type="input" name="tt" value="1" />&lt;input type="input" name="tt" value="2" />
&lt;input type="input" name="tt" value="3" />&lt;input type="input" name="tt" value="4" />
&lt;input type="input" name="tt" value="5" />&lt;input type="input" name="tt" value="6" />
&lt;input type="button" name="btn" id="btn" value="btn" />
ccutmis iT邦研究生 5 級 ‧ 2011-09-27 14:00:18 檢舉

用單層迴圈配一個物件 O(n) 就可以搞定,沒錯! 謝謝wiseguy的好方法,還可以把它改得更簡短,不過相對的就比較不好閱讀了。

你後來提出的 code 跟你一開始的土法煉鋼完全是兩回事…

關於版主的回覆,我想要解釋一下...土法不土法這很主觀,我從沒有說過我土法,只有說過能解決的方法就是好方法。一開始會那麼寫是因為版主也沒有先說明你的input元素數量是會變動的,所以才會有第二個版本的產生。它是不是最好的,我想絕對不是(總有更好的寫法嘛),但是算不算有解決問題,我想是的,至少它不需用到個陣列才能解決這問題。

chan15 iT邦新手 5 級 ‧ 2011-09-27 14:15:22 檢舉
&lt;pre class="c" name="code">&lt;script>
$(function() {
	$('#btn').click(function() {
		var $arr = $.map($('[name="tt"]'), function($ele) {
				return $($ele).val();
			}),
			$unique = $.unique($arr.slice(0));
				
		if ($unique.length != $arr.length) {
			alert('重複');
		} else {
			alert('送出');
		}
	});
});
&lt;/script>

提供在別站被提醒的另一種寫法,用到 jQuery 的 $.unique utility

ccutmis iT邦研究生 5 級 ‧ 2011-09-27 14:24:04 檢舉

這確實是蠻不錯的寫法~讚

4
wiseguy
iT邦超人 1 級 ‧ 2011-09-27 10:11:58

這問題用單層迴圈配一個物件 O(n) 就可以搞定,不必用到雙層迴圈 O(n^2) 的演算法。

&lt;pre class="c" name="code">
  
  &lt;script>
  function check(form)
  {
    var cache = new Object, duplicate = false;

    for(var i=form.elements.length-1; i>=0; i--)
      if (form.elements[i].type.toLowerCase() == 'text')
        if (typeof(cache[form.elements[i].value]) == 'undefined')
          cache[form.elements[i].value] = true;
        else
        {
          duplicate = true;
          break;
        }

    if (duplicate)
      alert('資料重複');
    else
      alert('送出');
  }
  &lt;/script>
  
  
  &lt;form>
    &lt;input type="text" name="txt1" value="1" />&lt;br>
    &lt;input type="text" name="txt2" value="2" />&lt;br>
    &lt;input type="text" name="txt3" value="3" />&lt;br>
    &lt;input type="text" name="txt4" value="4" />&lt;br>
    &lt;input type="text" name="txt5" value="5" />&lt;br>
    &lt;input type="button" name="btn" id="btn" value="btn" onclick="check(this.form);" />
  &lt;/form>
  

我要發表回答

立即登入回答