gspan.html
1 <html> 2 3 <head> 4 5 <title>表單驗證實例</title> 6 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 9 <script src="check.js" type="text/javascript"></script> 10 11 <style> 12 13 span{ font-size:12px; } 14 15 .stats1{ color : #ccc; } 16 17 .stats2{ color :black; } 18 19 .stats3{ color :red; } 20 21 .stats4{ color :green; } 22 23 24 25 </style> 26 27 </head> 28 29 <body> 30 31 <form method="post" action="reg.php" onsubmit="return regs('click')" > 32 33 用戶名：<input type="text" name="username" /><span class="stats1">用戶名不能為空</span><br/> 34 35 郵箱：<input type="text" name="email" /><span class="stats1">郵箱不能為空</span><br/> 36 37 密碼：<input type="password" name="password" /><span class="stats1">密碼不能為空</span><br/> 38 39 確認密碼：<input type="password" name="chkpass" /><span class="stats1">密碼不能為空</span><br/> 40 41 <input type="submit" /> 42 43 </form> 44 45 </body> 46 47 </html>
check.js
1 function gspan(cobj){ //獲取表單后的span 標簽 顯示提示信息 2 3 if (cobj.nextSibling.nodeName != 'SPAN'){ 4 5 gspan(cobj.nextSibling); 6 7 } else { 8 9 return cobj.nextSibling; 10 11 } 12 13 } 14 15 16 17 //檢查表單 obj【表單對象】， info【提示信息】 fun【處理函數】 click 【是否需要單擊， 提交時候需要觸發】 18 19 function check(obj, info, fun, click){ 20 21 var sp = gspan(obj); 22 23 obj.onfocus = function(){ 24 25 sp.innerHTML = info; 26 27 sp.className = 'stats2'; 28 29 } 30 31 32 33 obj.onblur = function(){ 34 35 if (fun(this.value)){ 36 37 sp.innerHTML = "輸入正確！"; 38 39 sp.className = "stats4"; 40 41 } else { 42 43 sp.innerHTML = info; 44 45 sp.className = "stats3"; 46 47 } 48 49 } 50 51 52 53 if (click == 'click'){ 54 55 obj.onblur(); 56 57 } 58 59 } 60 61 62 63 onload = regs; //頁面載入完執行 64 65 66 67 function regs(click){ 68 69 var stat = true; //返回狀態， 提交數據時用到 70 71 username = document.getElementsByName('username')[0]; 72 73 password = document.getElementsByName('password')[0]; 74 75 chkpass = document.getElementsByName('chkpass')[0]; 76 77 email = document.getElementsByName('email')[0]; 78 79 80 81 check(username, "用戶名的長度在3-20之間", function(val){ 82 83 if (val.match(/^\S+$/) && val.length >=3 && val.length <=20){ 84 85 return true; 86 87 } else { 88 89 stat = false; 90 91 return false; 92 93 } 94 95 }, click); 96 97 98 99 check(password, "密碼必須在6-20位之間", function(val){ 100 101 if (val.match(/^\S+$/) && val.length >= 6 && val.length <=20){ 102 103 return true; 104 105 } else { 106 107 stat = false; 108 109 return false; 110 111 } 112 113 }, click); 114 115 116 117 118 119 check(chkpass, "確定密碼要和上面一致，規則也要相同", function(val){ 120 121 if (val.match(/^\S+$/) && val.length >=6 && val.length <=20 && val == password.value){ 122 123 return true; 124 125 } else { 126 127 stat = false; 128 129 return false; 130 131 } 132 133 }, click); 134 135 136 137 check(email, "請按郵箱規則輸入", function(val){ 138 139 if (val.match(/\w+@\w+\.\w/)){ 140 141 return true; 142 143 } else { 144 145 stat = false; 146 147 return false; 148 149 } 150 151 }, click); 152 153 return stat; 154 155 }