作者TonyQ (骨頭)
看板Ajax
標題[討論] 表單的必填欄位
時間Tue Feb 27 18:00:10 2007
由於工作上的需要以及對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)
1F：推 PsMonkey:還不錯阿... 怎麼沒人 m 也沒人推 02/28 06:11
2F：推 curtis816:推 02/28 08:18
3F：推 smno1:推 03/12 20:45