[討論] 表單的必填欄位

看板Ajax作者TonyQ (骨頭)時間18年前 (2007/02/27 18:00)推噓3(3推 0噓 0→)

留言3則, 3人參與討論串1/3 (看更多)

由於工作上的需要以及對lib的無知，小弟自己用JavaScript寫了一些簡單的function，想提出來討論 (不過才剛寫好，可能有些疏漏)。簡單來說這個traval function適用在檢查表單的必填項目。透過在表單下自訂Attribute的方式來達到必填項目的控管，也可以將那些在submit_check前煩雜的 if else 做一定程度的簡化。適用IE & FF。使用的自訂屬性一共有三個。 mark(必填) , colname(可免填) , rule(可免填) (只是用底下a、d系列) @mark : 用來標記此element為必填項目 @colname:在此項目未填時，可用來作為提示訊息。 @rule : 支援正則表示式之字串規格驗證適用目標： input tag系列 :(a) text password file hidden (b)checkbox radio (c)SELECT (d)Textarea a類別是屬於 value比對類。如果沒有輸入rule則trim後比對空白。 b類別屬於群組確認內。擷取目標的name屬性進行getElementByNames，取得的群組中只要有一個屬於checked ，就算通過驗證。 c類別是驗證下拉式選單是否停在第一個選項 d類別同a類另外沒有通過必填項目驗證者會提示訊息並將目標node做focus 使用範例 <input tpye="text" mark="true" rule=".+" colname="報表名稱" id="rna" name="rna"> 由於才剛寫好還蠻興奮的，所以提出來和同好分享，如果有前輩對這類的小工具有甚麼要注意的地方，或者是有值得改進的地方，可提供給晚輩參考的，還請不吝指教。原碼暫且先貼在後，不過只是初稿，因為晚上有約所以才剛告一段落而已，稍後校稿之後會再修正一次。^^ ──────────────────────────────── //瀏覽所有節點 function traval(){ var node_targe; var typeArray=new Array(3); typeArray[0]="INPUT"; typeArray[1]="SELECT"; typeArray[2]="TEXTAREA" for(var i=0;i<typeArray.length;i++){ node_targe=document.getElementsByTagName(typeArray[i]); for(var nodeId in node_targe) { if(document.all){ if(node_targe[nodeId].mark) checkNode(nodeId); }else{//FF對自訂屬性的處理法 : 改用getAttribute //將除了可操作元件以外的屬性排除 if((typeof node_targe[nodeId].nodeType)=="undefined") continue; var targeNode=node_targe[nodeId]; if(targeNode!=null&&targeNode.getAttribute("mark")){ checkNode(targeNode.getAttribute("id")); } } } } } //個別檢查節點 function checkNode(nodeId){ var node=document.getElementById(nodeId); var check=true; switch(node.nodeName){ case "INPUT": alert('hi'); //檢查"輸入"型態的欄位 (或者換句話說 , 用value判斷者 . 支援 regex ) if(node.type=="text" || node.type=="password" || node.type=="file" || node.type=="hidden"){ if(node.getAttribute("rule")){ if(!match(node.value,node.getAttribute("rule"))){ alertErrorMsg(nodeId); return false; }else return true; }else{ if(trim(node.value)==""){ alertErrorMsg(nodeId); return false; } } //群組式的 checkbox 或 radio ..檢查同 [name] 的群組是否有被勾選 }else if (node.type=="checkbox"||node.type=="radio"){ var NodeGroup=document.getElementsByName(node.name); var check=false; for(var k in NodeGroup){ if(NodeGroup[k].checked){ check=true; } } if(!check) { alertErrorMsg(nodeId); return false; } }else{ alert('debug:在['+nodeId+']出現未知的型別 ['+node.type+']!'); return false; } break; case "SELECT": if(node.selectedIndex==0){ alertErrorMsg(nodeId); return false; } break; case "Textarea": if(node.getAttribute("rule")){ match(node.value,node.getAttribute("rule")); }else{ if(trim(node.value)==""){ alertErrorMsg(nodeId); return false; } } break; default: alert('debug:在['+nodeId+']出現未知的型別 ['+node.nodeName+']!'); break; } alert('finish'+node.nodeName); } function match(str,pattern){ var re = new RegExp(pattern, "gi"); if(!re.test(str)) return false; else return true; } function trim(str) { return str.replace(/^\s*|\s*$/g,""); } function alertErrorMsg(nodeId){ var node=document.getElementById(nodeId); if(node.getAttribute("colname")) alert(node.colname+"未正確填寫!"); else alert("尚有欄位未正確填寫!"); node.focus(); return false; } </script> -- String temp="relax"; | Life just like programing while(buringlife) String.forgot(temp); | to be right or wrong while(sleeping) brain.setMemoryOut(); | need not to say stack.push(life.running); | the complier will stack.push(scouting.buck()); | answer your life stack.push(bowling.practice()); | Bone everything -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 220.134.27.68 ※ 編輯: TonyQ 來自: 220.134.27.68 (02/27 18:01)