朋友接了一個ABC給她的活兒，要做一個很多表單的頁面，但是又沒有后台和數據庫支持，最后決定把表單內容都搜集到郵件里面發給站長。
最后完成的DEMO：
<!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=utf-8" /> <title>表單郵件</title> </head> <body> <div> <div> <label id="cont1">郵件內容第一部分</label> <input type="text" id="content1" name="content1" maxlength="100" onblur="checkstring('msg2',100,'content1');"/> <span id="msg2" style="color:red;"></span> </div> <div> <label id="cont2">郵件內容第二部分</label> <input type="text" id="content2" name="content2" maxlength="100" onblur="checkstring('msg3',100,'content2');"/> <span id="msg3" style="color:red;"></span> </div> <div> <label id="cont3">郵件內容第二部分</label> <input type="text" id="content3" name="content3" maxlength="100" onblur="checkstring('msg4',100,'content2');"/> <span id="msg4" style="color:red;"></span> </div> </div> <div> <input type="button" onclick="sendEmail();" value="發送郵件"/> </div> </div> </body> </html>
JS部分：
function sendEmail() { var url = 'mailto:'+'haimingpro@gmail.com'+'?subject=' +encodeURIComponent('大家來提交郵件')+ '&body= ' + encodeURIComponent(document.getElementById('cont1').innerHTML) + ':'+ encodeURIComponent(document.getElementById('content1').value) +',' + encodeURIComponent(document.getElementById('cont2').innerHTML) + ':' + encodeURIComponent(document.getElementById('content2').value) +',' +encodeURIComponent(document.getElementById('cont3').innerHTML) + ':' + encodeURIComponent(document.getElementById('content3').value) ; window.open(url); }; function checkstring(msg,lenth,elementId) { document.getElementById(msg).innerHTML =''; var string = document.getElementById(elementId).value.trim(); var reg=new RegExp('^.{1,'+lenth+'}$'); if (string == ''||!reg.test(string.value)) { document.getElementById(msg).innerHTML = '<b>請輸入1到'+lenth+'個字符！</b>'; return false; }else if(string.indexOf(">")>-1||string.indexOf("<")>-1) { document.getElementById(msg).innerHTML = '<b>字符中包含<>，請重新輸入！</b>'; return false; } return true; };
sendEmail()函數負責啟動像OUTLOOK這種郵件程序。
checkstring() 函數會檢查是否輸入了字符，並且提示。
document.getElementById('content1').value.trim()
這個.trim()在url值不是很長的時候IE還正常，url的賦值長了以后就導致IE下sendEmail()的onclick失靈。后來去掉了.trim()，只留下value還是可以取到值，解決了IE的問題。
encodeURIComponent 這個方法還是第一次接觸，原來是JS方法啊，以前都不知道。不過可能我的IE本身顯示沒有調好，用了這個方法還是會亂碼，托我做這個DEMO的朋友倒沒有亂碼。火狐下大家都不會亂碼。
查到的資料文章：
一般js獲取控件值的方法都是document.getElementById("id").value,但是 lable的話有些不一樣。<asp:Label />到了客戶端就會成為 <span>， 而<span>只能用innerText和innerHTML來指定其顯示內容。
所以取值的方法就：var id=document.getElementById("id").innerText;
如果lable 要隱藏的話就<asp:Label ID="id" runat="server" Text="" style="display:none"></asp:Label>
而不要用 Visible="False"
如果你想把雙引號當作字符串與其他字符串計算,如果不使用轉義符(\"),就可以使用escape()函數對當前敏感字符encode,然后用unescape()函數解碼就行了 var Ab=escape('"'); Ab=Ab+"好的"; var Ac=unescape(Ab); alert(Ab); alert(Ac);
js對文字進行編碼涉及3個函數：
escape,encodeURI,encodeURIComponent，
相應3個解碼函數：
unescape,decodeURI,decodeURIComponent
1、 傳遞參數時需要使用encodeURIComponent，這樣組合的url才不會被#等特殊字符截斷。
例如：<scriptlanguage="javascript">document.write('<ahref="http://passport.baidu.com/?logout&aid=7&u=+encodeURIComponent("http://cang.baidu.com/bruce42")+">退出');
2、 進行url跳轉時可以整體使用encodeURI 例如：Location.href=encodeURI("http://cang.baidu.com/do/s?word=百度&ct=21");
3、 js使用數據時可以使用escape 例如：搜藏中history紀錄。
4、 escape對0-255以外的unicode值進行編碼時輸出%u****格式，其它情況下escape，encodeURI，encodeURIComponent編碼結果相同。 最多使用的應為encodeURIComponent，它是將中文、韓文等特殊字符轉換成utf-8格式的url編碼，所以如果給后台傳遞參數需要使用encodeURIComponent時需要后台解碼對utf-8支持（form中的編碼方式和當前頁面編碼方式相同）
escape不編碼字符有69個：*，+，-，.，/，@，_，0-9，a-z，A-Z encodeURI不編碼字符有82個：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z encodeURIComponent不編碼字符有71個：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z
escape() 方法: 所有空格、標點符號、重音字符,以及任何其他非ASCII字符都編碼改為"%XX"的形式,xx是16進制數字所代表. escape和unescape的編碼和解碼功能, escape返回16進制編碼的一種ISO拉丁字符集.
unescape的功能將具有特殊值的16進制編碼轉換為ASCII字符串
舉例: escape('!@#$%^&*(){}[]=:/;?+\'"'): 結果:%21@%23%24%25%5E%26*%28%29%7B%7D%5B%5D%3D%3A/%3B%3F+%27%22 encodeURI() 方法 encodeURI方法返回一個編碼后的URI. 因此,如果你將其結果用dencodeURI方法,原始的串會返回.
encodeURI的方法並不對以下字符編碼:":"、"/"、"; "、"? ". 但可以使用
encodeURIComponent的方法對這些字符進行encode. encodes,一種 Uniform Resource Identifier(URI)逐一替換某些字符,描述為UTF-8編碼的特點.
例如 : encodeURI('!@#$%^&*(){}[]=:/;?+\'"'): 結果:!@#$%25%5E&*()%7B%7D%5B%5D=:/;?+'%22
encodeURIComponent() 方法: encodeURIComponent方法返回一個編碼的URI. 因此,如果你將dencodeURIComponent,原來的串會返回.由於所有文字encodeURIComponent方法都會進行編碼,所以要小心,如果存在路徑等串例如:"/FOLDER1/FOLDER2/DEFAULT.HTML". 加密后並不會,如果作為一個網絡服務器的請求將會失效.
使用這種方法Encodeuri當字符串超過一個以上URI組成. encodes,一種 Uniform Resource Identifier(URI)(URI)逐一替換某些字符,描述為UTF-8編碼的特點. 例子:最簡單的方法就是看它們加密這些字符后生成的代碼. encodeURIComponent('!@#$%^&*(){}[]=:/;?+\'"'): 結果 !%40%23%24%25%5E%26*()%7B%7D%5B%5D%3D%3A%2F%3B%3F%2B'%22