纯JS的表单邮件发送

朋友接了一个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