Javascript 表單通用欄位驗證

通用欄位檢查(by Bryan不來ㄣ)
版本日期: 2008/04/29
使用方式:在需要檢查的欄位中放入 fieldname="欄位名稱" chk="true" 即可，javascript是通用的，無需修改
參數說明:
fieldname: 檢查不通過，alert時所顯示的欄位名稱
chk: true表示要檢查
min: 複選欄位至少選幾項
regexp: 使用正規式檢查
ps: 同名的radio或checkbox的fieldname、chk、min(至少選幾項)屬性只需要放在第一個裡面

 

 

 

 

 

 

*姓名:
 

*ID:
 

*Age:
 

電話:
 

地址:
 

*性別:男女
 

*嗜好
 

*下拉選單1: 

	請選擇 

	1 

	2 


 

下拉選單2: 

	請選擇 

	1 

	2 


 

*下拉選單3: 

	1 

	2 

	3	 


	 

 

 

 

 

 

將Html 轉為 JavaScript

有時候我們必須將html碼改由JavaScript去write出來~~
如果程式很長，又要自己去拚出來太麻煩怎麼辨??

我們可以將下面的code複制起來存成html~
或按這裡下載

<br /><table width="300">
<br /><tr><td align="right">A</td></tr>
<br /></table>

在表單中即時 +-*/ 加減乘除

若我們要即時在表單中+-*/ 加減乘除，可以透過Javascript達成
一般最常應用在購物時計算金額，或是到旅行社網站計算旅費時~~



範例程式下載


附上幾個function code

function numsum() { 
 var f = document.forms[0]; 
 f.sum.value = (f.t.value==""?0:parseFloat(f.t.value)) + (f.t2.value==""?0:parseFloat(f.t2.value)); 
}
function change() { 
 var f = document.forms[0]; 
 f.t.value = f.select.value * 50; 
 numsum();
}
function change2() { 
 var f = document.forms[0]; 
 f.t2.value = f.select2.value * 70; 
 numsum();
} 

如何做 Q & A 縮排 ?

在做 Q & A 時，我們常會利用控制display來達成隱藏跟顯示
尤其在資料列相當多時，這樣做可以簡省網頁的長度~~

才不會看起來"落落長"(台語)~~


範例程式下載

HTML

  
    
    
1.doremicat生日為幾月幾號?
  
  
    
    
11月12日 天蠍座
  
  
    
    
2.doremicat最近最愛喝什麼?
  
  
    
    
蘆筍汁~~
    
  
    
    
    
3.doremicat的興趣?
  
  
    
    
 攝影、二胡、寫程式
 
  
    
    
    
4.doremicat最怕什麼?
  
  
    
    
蜘蛛
 
  
    
    
    
5.如何與doremicat聯絡?
  
  
    
    
doremi.miredo@gmail.com
 
  

Javascript

var number=5;

function LMYC() {
var lbmc;
    for (i=1;i<=number;i++) {
        lbmc = eval('LM' + i);
        lbmc.style.display = 'none';
    }
}
 
function ShowFLT(i) {
    lbmc = eval('LM' + i);
    if (lbmc.style.display == 'none') {
        LMYC();
        lbmc.style.display = '';
    }
    else {
        lbmc.style.display = 'none';
    }
}

JS 防止回上一頁

很多時候我們會避免user回到上一頁面，例如..活動索取贈品時，
不得回上一頁面重覆索取~~這時候可以用JS location.replace
來防止後續的頁面不得回上一頁~~~~

下一頁

JS 驗證網頁來源

假設我們有一個頁面不想讓人盜連，也就是所謂的"非法連結"
我們可以透過document.domain 來判定來源網址...

在body onload呼叫 domainTest

< body onLoad="domainTest()" >

動態改變網頁標題

之前朋友問我這個問題，就順便寫一下好了~~~
基本上我是很少會動態去改變標題名稱~~

建立changeTitle funtion

function changeTitle(){
document.title=document.getElementById("abc").value
}

利用button onclick去呼叫

請輸入網頁標題：

延遲廣告載入，避免廣告拖慢你網站的速度

現在部落格放廣告已經是很平常的事情了，但是有些時候廣告商的主機負
荷太大時，會拖慢我們自己部落格的開啟速度，所以我們最好可以利用某
種方式來讓廣告最後顯示，或是廣告最後讀取，就算讀不出來，訪客還是
可以正常的觀看我們的文章不受影響。

此文章參考至 demo小舖

做法如下

在你要放置廣告的地方輸入以下HTML

廣告讀取中… 

再到頁面的最後輸入以下HTML

請填寫廣告語法
 

再上方的HTML下輸入以下js

使用JS刪除全站連結虛線框

弄好的連結有虛線框~不喜歡怎辦???
這裡提供Javascript用法，當然也可以用CSS去搞定~~

請放在HEAD裡面

Igoogle 拖拉版面

一般我們在做Igoogle拖拉，在ASP.NET會利用像web part去做...
而也有一些公司開發ajax版本的，如下
http://extjs.com/deploy/dev/examples/portal/portal.html

而藍色小舖Bryan(不來ㄣ)，自己開發了簡易的Igoogle拖拉版面...
點我進入原始討論串


點我範例程式下載

應用網站範例

code如下

html

 

iGoogle模擬 -- by Bryan(不來ㄣ)



	
drag me
Bryan
 

	
drag me
不來ㄣ
 







	
drag me
Hello







	
drag me
How
 

	
drag me
are

	
drag me
you?
	 

如何自己做搜尋列 ?

如果想在自己的網站做一個可以搜尋各知名網站的搜尋列該怎做呢?
其實一般搜尋網都是用get去接收指令，如下..

Google
http://www.google.com.tw/search?q=

奇摩搜尋
http://tw.search.yahoo.com/search?ei=UTF-8&p=

奇摩知識+
http://tw.search.yahoo.com/search/kp?p=

MSN搜尋
http://search.msn.com.tw/results.aspx?q=

此時我們只要得知各搜尋網的GET參數，就可以動手做一個搜尋器..
以下code作者為，重灌狂人，也就是藍色小舖 Bryan不來ㄣ

點我範例下載


Javascript

html

善用 title 屬性

有時我們可以利用html的title屬性配合Javascript來說明或當小提示..
這在一個頁面下，要同時擠下很多說明時就可以用到..

範例網頁

點我範例下載
code如下
插入Javascript代碼

此時title屬性就可以使用html碼，並延長顯示

範例連結

熱門關鍵字廣告

熱門關鍵字廣告也是網路行銷的其中一種方式~~
我們常看到別人網站一些熱門關鍵字是如何做的呢???
以下提供範例~~可自行修改成後台管理關鍵字廣告~~~

範例下載

  
前超級營救隊隊員篠原祐司（伊藤英明 飾）與妻子由美（櫻井幸子 飾）為了幫女兒詩織（大森絢音 飾）慶祝7歲的生日，由美帶詩織前往銀座跟祐司會合的途中碰上恐慌逃命的群眾推擠，不慎與失聰的詩織走散。由美著急地打電話給前往地鐵新橋站的祐司，同時大量海水湧進地鐵站，新橋站發出轟隆巨響，瞬間崩塌！

Javascript 幾秒後自動更新頁面

前陣子弄了一個音樂小貼紙，會播放廣播(音源來自中華電信)，在小貼紙上
也有一個顯示目前正在播放哪首歌曲的跑馬燈(我設定每30秒更新一次)
這裡介紹Javascript 如何幾秒後自動更新頁面的方法..code如下

方法一

timer = self.setTimeout("location.reload(true)",30000); //30秒更新

方法二

timer = self.setTimeout("history.go(0)",30000); //30秒更新

浮動圖層，廣告範例

做網頁的時候常常會用到一種廣告方式會跟隨著瀏覽器的捲軸移動，
這裡提供原始檔案，如果您也有興趣可以自行把程式修改...
例如改成~顯示幾秒後關閉、幾秒後圖片輪播~來做應用~~code如下

範例程式下載

這裡放您要呈現的內容

  adWidth = 160;//廣告寬度
  nowX = 1000;//目前位置(left)
  nowY = 100;//目前位置(top)

  fad_style = document.getElementById('iRFloating').style;

  function fadIni()
  {
      innerWidth = document.body.clientWidth;
      innerHeight = document.body.clientHeight;
  
      edge = (innerWidth-1000)/2;
  
      if( edge > adWidth )
      {
          posX = edge + 1000;
      }
      else
      {
          posX = innerWidth-adWidth;
      }
  
      posY = 100;
  
  }
  function fadRefresh()
  {
      offsetX = posX + document.body.scrollLeft - nowX;
      offsetY = posY + document.body.scrollTop - nowY;
      nowX += offsetX / 5;
      nowY += offsetY / 5;
      fad_style.left = nowX;
      fad_style.top = nowY;
  
      floatID = setTimeout('fadRefresh()', 20 );//Refresh時間
  }
  
  function fadStart()
  {
      fadIni();
      window.onresize=fadIni;
      fadRefresh();
  }
  
  fadStart();

避免表單重覆送出內容

我們常會用一些表單來送出使用者所填的資料,
例如..註冊會員~各種報名表~但有時會因為伺服器或網路反應過慢,
而導致使用者以為沒按到,再多按一次...
於是我們可以透過下面的方式來防止表單重覆送出...

在HEAD與/HEAD之間插入

在BODY與/BODY之間插入

在表單text欄位，顯示預設值

我們一般在做表單讓使用者輸入資料時，常會在欄位旁邊加上註解，說明該欄位的用途，讓介面更加友善，另外也可以直接在text欄位上顯示..

範例程式下載

關閉視窗，不顯示詢問框

我們常用window.close來關閉視窗
但是window.close在IE7版本開始會出現提示窗



如果不想出現詢問框直接關閉的話，可以參考下面的code

表頭跟隨資料列

有時會因資料列過長~~而表頭在最上方~~~
而無法清楚對應到表格中的資料欄位說明~~~

簡單的利用Javascript達成，因code太長，直接提供下載吧~~

表頭跟隨資料列範例下載

讀取不到圖片，則顯示預設圖

在設計的網頁中,如果需載入的圖檔過多,
而當讀取太久,是否會遇到圖片無法顯示~~
Javascript有提供onabort事件,來處理這個例外~~

上面的CODE是以單張圖來做示範,但如果頁面太多圖都需要這樣的處理方
式,那麼不就要1張圖1個funtion??那豈不是很笨??

透過下面的方式,我們可以聰明的使用1個funtion來處理所有問題..