Javascript_06_ 表單驗證（離開單項，輸入框後提示資訊）

說明：對於必須輸入的入力框，游標離開（使用 onblur方法）時進行檢查。假如有錯，紅色的提示資訊直接在該畫面的這個輸入框的後面顯示出來，並把游標重新定向到這個輸入框。

待解決問題：

①    記憶體洩漏問題：比如使用者名稱沒輸入，離開使用者名稱輸入框時，畫面上會給出提示警告資訊；此時再點選密碼輸入框時，會導致 IE佔用很大的記憶體，好像是記憶體洩漏了。

②    對於選擇框的檢查問題（上述方法是在從輸入框離開時進行檢查），對於選擇框，我直接沒有點選選擇，又怎麼檢查呢？此問題擴充套件開來，假如使用者直接沒有將游標放入過必須輸入項，那這一項的檢查也就無從談起了。極端些，假如使用者什麼也沒有輸入，就直接點選提交，這種檢查機制就不會起作用。前面那個彈警告框的驗證方式，雖然使用者體驗不太好，但是肯定能起作用。

這邊只是先將這種使用者體驗比較好的檢查機制的原理用程式碼表現一下，以下的這兩個檔案還需要改善。但這種使用者體驗比較好的檢查機制是以後的發展方向，也是我們要努力的方向。

1.      regcheckdata2.js

1. function checkdata() {  
2.       var ssn=form.username.value.toLowerCase();  
3.       if (!checkUserName(ssn)) return false;  //使用者名稱檢查  
4.       var pwd1 = form.pwd.value;  
5.       if (!checkPassword1(pwd1)) return false;  //密碼1檢查  
6.       var pwd2 = form.pwd2.value;  
7.       if (!checkPassword1(pwd2)) return false;  //確認密碼檢查  
8.       //檢查性別  
9.       if( !(form.sex[0].checked || form.sex[1].checked) ) {  
10.             alert("請選擇性別!");  
11.             form.sex[0].focus();  
12.             return 
    false;  
13.       }  
14.       //檢查省份  
15.       if( form.province.selectedIndex == 0 ) {  
16.             alert("請選擇省份!");  
17.             form.province.focus();  
18.             return false;  
19.       }  
20.       if(form.intro.value == "") {  
21.             alert("/自我介紹不能為空!");  
22.             form.intro.focus();  
23.             return false;  
24.       }  
25.       return true;  
26. }  
27. // 使用者名稱檢查  
28. function checkUserName(ssn){  
29.       if( ssn.length<3 || ssn.length>18 ) {  
30.             document.getElementById("usernameErr").innerHTML = "<font color='red'>  
31. 請輸入正確的使用者名稱,使用者名稱長度為3-18位！</font>";  
32.             form.username.focus()  
33.             return false;  
34.       }  
35.       if (isWhiteWpace(ssn)){  
36.             document.getElementById("usernameErr").innerHTML = "<font color='red'>請輸入正確的使用者名稱,使用者名稱中不能包含空格！</font>";  
37.             form.username.focus()  
38.             return false;  
39.       }  
40.       if (!isSsnString(ssn)){  
41.             document.getElementById("usernameErr").innerHTML = "<font color='red'>對不起，您選擇的使用者名稱不正確或已被佔用！使用者名稱/n由a～z的英文字母(不區分大小寫)、0～9的數字、點、減/n號或下劃線組成，長度為3～18個字元，只能以數字或字母/n開頭和結尾,例如:kyzy_001。</font>";  
42.             form.username.focus()  
43.             return false;  
44.       }  
45.       //輸入正確的使用者名稱後，將上次的錯誤提示資訊清掉  
46.       document.getElementById("usernameErr").innerHTML = "";  
47.       return true;  
48. }  
49. //密碼檢查  
50. function checkPassword1(pwd1) {  
51.       if( strlen(pwd1)<6 || strlen(pwd1)>16 ) {  
52.             //alert("/正確地登入密碼長度為6-16位，僅可用英文、數字、特殊字元！")  
53.             document.getElementById("pwdErr").innerHTML = "<font color='red'>正確地登入密碼長度為6-16位，僅可用英文、數字、特殊字元！</font>";  
54.             form.pwd.focus()  
55.             return false;  
56.       }  
57.       if( strlen2(pwd1) ) {  
58.             //alert("/您的密碼中包含了非法字元，僅可用英文、數字、特殊字元！")  
59.             document.getElementById("pwdErr").innerHTML = "<font color='red'>您的密碼中包含了非法字元，僅可用英文、數字、特殊字元！</font>";  
60.             form.pwd.focus()  
61.             return false;  
62.       }  
63.       if( pwd1 == form.username.value ) {  
64.             //alert("/使用者名稱和密碼不能相同！")  
65.             document.getElementById("pwdErr").innerHTML = "<font color='red'>密碼和使用者名稱不能相同！</font>";  
66.             form.pwd.focus()  
67.             return false;  
68.       }  
69.       document.getElementById("pwdErr").innerHTML = "";  
70.       return true;  
71. }  
72. //確認密碼檢查  
73. function checkPassword2(pwd2) {  
74.       if( pwd2 =="" ) {  
75.             //alert("/請輸入密碼確認！")  
76.             document.getElementById("pwd2Err").innerHTML = "<font color='red'>請輸入密碼確認！</font>";  
77.             form.pwd2.focus()  
78.             return false;  
79.       }  
80.       if( pwd2 != form.pwd.value ) {  
81.             //alert("/兩次密碼輸入不一致！")  
82.             document.getElementById("pwd2Err").innerHTML = "<font color='red'>兩次密碼輸入不一致！</font>";  
83.             form.pwd2.focus()  
84.             return false;  
85.       }  
86.       document.getElementById("pwd2Err").innerHTML = "";  
87.       return true;  
88. }  
89. function strlen(str){  
90.       var len;  
91.       var i;  
92.       len = 0;  
93.       for (i=0;i<str.length;i++){  
94.             if (str.charCodeAt(i)>255) len+=2; else len++;  
95.       }  
96.       return len;  
97. }  
98. function strlen2(str){  
99.       var len;  
100.       var i;  
101.       len = 0;  
102.       for (i=0;i<str.length;i++){  
103.             if (str.charCodeAt(i)>255) return true;  
104.       }  
105.       return false;  
106. }  
107. function isWhiteWpace (s)  
108. {  
109.       var whitespace = " /t/n/r";  
110.       var i;  
111.       for (i = 0; i < s.length; i++){    
112.             var c = s.charAt(i);  
113.             if (whitespace.indexOf(c) >= 0) {  
114.                   return true;  
115.             }  
116.       }  
117.       return false;  
118. }  
119. function isSsnString (ssn)  
120. {  
121.       var re=/^[0-9a-z][/w-.]*[0-9a-z]$/i;  
122.       if(re.test(ssn))  
123.             return true;  
124.       else  
125.             return false;  
126. }  
127. function checkssn(gotoURL) {  
128.    var ssn=form.username.value.toLowerCase();  
129.    if (checkUserName(ssn)){  
130.          var open_url = gotoURL + "?username=" + ssn;  
131.          window.open(open_url,'','status=0,directories=0,resizable=0,toolbar=0,location=0,scrollbars=0,width=322,height=200');  
132.       }  
133. }   

2.      userReg2.html

1. <html>  
2.       <head>  
3.             <title>表單</title>  
4.             <mce:script language=JavaScript src="script/regcheckdata.js" mce_src="script/regcheckdata.js"></mce:script>  
5.             <mce:script type="text/javascript"><!--  
6. // --></mce:script>  
7.       </head>  
8.       <body>  
9.             <form name="form" action="01.html" method="get" onSubmit="return checkdata()">  
10.                   <table width="750" align="center" border="2">  
11.                         <tr>  
12.                               <td colspan="2" align="center">使用者註冊</td>  
13.                         </tr>  
14.                         <tr>  
15.                               <td>使用者名稱：</td>  
16.                               <td>  
17.                                     <input type=text name="username" size="30" maxlength="10" onblur="checkUserName(this.value.toLowerCase())">  
18.                           <span id="usernameErr"></span>//同一行（首選）  
19.                           <!--<div id="usernameErr"></div>-->//另起一行  
20.                               </td>  
21.                         </tr>  
22.                         <tr>  
23.                               <td>密碼：</td>  
24.                               <td>  
25.                                     <input type=password name="pwd" size="15" maxlength="12" onblur="checkPassword1(this.value)">  
26.                                     <span id="pwdErr"></span>  
27.                               </td>  
28.                         </tr>  
29.                         <tr>  
30.                               <td>密碼確認</td>  
31.                               <td>  
32.                                     <input type=password name="pwd2" size="15" maxlength="12" onblur="checkPassword2(this.value)">  
33.                                     <span id="pwd2Err"></span>  
34.                               </td>  
35.                         </tr>  
36.                         <tr>  
37.                               <td>性別</td>  
38.                               <td>  
39.                                     <input type=radio name="sex" value="male">男  
40.                                     <input type=radio name="sex" value="female">女  
41.                               </td>  
42.                         </tr>  
43.                         <tr>  
44.                               <td>你感興趣</td>  
45.                               <td>  
46.                                     <input type="checkbox" name="interest" value="vc" checked>VC  
47.                                     <input type="checkbox" name="interest" value="vb">VB  
48.                                     <input type="checkbox" name="interest" value="vfoxpro">VF  
49.                                     <input type="checkbox" name="interest" value="vjava">VJ  
50.                                     <br>  
51.                                     <input type="checkbox" name="interest" value="bc">BC  
52.                                     <input type="checkbox" name="interest" value="cobol">CO  
53.                                     <input type="checkbox" name="interest" value="java">JA  
54.                                     <input type="checkbox" name="interest" value="delphi">Delphi  
55.                               </td>  
56.                         </tr>  
57.                         <!--必須選中JSP-->  
58.                         <input type="hidden" name="interest" value="jsp">  
59.                         <tr>  
60.                               <td>你感興趣</td>  
61.                               <td>  
62.                                     <select name="interest2" size=8 multiple>  
63.                                           <option value="vc" selected>VC</option>  
64.                                           <option value="vb">VB</option>  
65.                                           <option value="vfoxpro">VF</option>  
66.                                           <option value="vjava">VJ</option>  
67.                                           <option value="bc">BC</option>  
68.                                           <option value="cobol">CO</option>  
69.                                           <option value="java">JA</option>  
70.                                           <option value="delphi">Delphi</option>  
71.                                     </select>  
72.                               </td>  
73.                         </tr>  
74.                         <tr>  
75.                               <td>你來自</td>  
76.                               <td>  
77.                                     <select name="province">  
78.                                           <option value=0 selected>請選擇</option>  
79.                                           <option value=34>安徽</option>  
80.                                           <option value=11>北京</option>  
81.                                           <option value=50>重慶</option>  
82.                                           <option value=35>福建</option>  
83.                                           <option value=62>甘肅</option>  
84.                                           <option value=44>廣東</option>  
85.                                           <option value=45>廣西</option>  
86.                                           <option value=52>貴州</option>  
87.                                           <option value=46>海南</option>  
88.                                           <option value=13>河北</option>  
89.                                           <option value=23>黑龍江</option>  
90.                                           <option value=41>河南</option>  
91.                                           <option value=42>湖北</option>  
92.                                           <option value=43>湖南</option>  
93.                                           <option value=32>江蘇</option>  
94.                                           <option value=36>江西</option>  
95.                                           <option value=22>吉林</option>  
96.                                           <option value=21>遼寧</option>  
97.                                           <option value=64>寧夏</option>  
98.                                           <option value=15>內蒙古</option>  
99.                                           <option value=63>青海</option>  
100.                                           <option value=31>上海</option>  
101.                                           <option value=14>山西</option>  
102.                                           <option value=37>山東</option>  
103.                                           <option value=51>四川</option>  
104.                                           <option value=61>陝西</option>  
105.                                           <option value=12>天津</option>  
106.                                           <option value=54>西藏</option>  
107.                                           <option value=65>新疆</option>  
108.                                           <option value=53>雲南</option>  
109.                                           <option value=33>浙江</option>  
110.                                           <option value=71>臺灣</option>  
111.                                           <option value=81>香港</option>  
112.                                           <option value=82>澳門</option>  
113.                                           <option value=0>其他</option>  
114.                                     </select>  
115.                               </td>  
116.                         </tr>  
117.                         <tr>  
118.                               <td>自我介紹</td>  
119.                               <td>  
120.                                     <textarea rows="12" cols="80" name="intro">