使用方式:在需要檢查的欄位中放入 fieldname=”欄位名稱” chk=”true” 即可,javascript是通用的,無需修改

參數說明:
fieldname: 檢查不通過,alert時所顯示的欄位名稱
chk: true表示要檢查
min: 複選欄位至少選幾項
regexp: 使用正規式檢查
ps: 同名的radio或checkbox的fieldname、chk、min(至少選幾項)屬性只需要放在第一個裡面

-- 程式碼參考 - 開始 --

<HTML>
<HEAD>
<FORM onsubmit="return checkFieldValue(this)">   

*姓名:<INPUT name=t1 chk="true" fieldname="姓名"> 
*ID:<INPUT maxLength=10 name=t2 chk="true" fieldname="ID" regexp="/^[A-Z]\d{9}$/"> 
*Age:<INPUT maxLength=3 name=t3 chk="true" fieldname="Age" regexp="/^\d{1,3}$/"> 
電話:<INPUT name=t4> 
地址:<INPUT name=t5> 
*性別:<INPUT type=radio value=M name=r1 chk="true" fieldname="性別">男<INPUT type=radio value=F name=r1>女 
*嗜好<INPUT type=checkbox value=1 name=ck1 chk="true" fieldname="嗜好" min="3"><INPUT type=checkbox value=2 name=ck1><INPUT type=checkbox value=3 name=ck1><INPUT type=checkbox value=4 name=ck1> 
*下拉選單1:<SELECT name=s1 chk="true" fieldname="下拉選單1"> <OPTION value="" selected>請選擇</OPTION> <OPTION value=1>1</OPTION> <OPTION value=2>2</OPTION></SELECT> 
下拉選單2:<SELECT name=s2> <OPTION value="" selected>請選擇</OPTION> <OPTION value=1>1</OPTION> <OPTION value=2>2</OPTION></SELECT> 
*下拉選單3:<SELECT multiple size=3 name=s3 chk="true" fieldname="下拉選單3" min="2"> <OPTION value=1>1</OPTION> <OPTION value=2>2</OPTION> <OPTION value=3>3</OPTION></SELECT>  <INPUT type=submit value=送出查詢>

</FORM>   

<SCRIPT>   

function checkFieldValue(f) {   

    var msg = "欄位未填或未選擇";   

    var msgMin = "欄位至少要選擇 n 項";   

    for (var i=0;i<f.elements.length;i++) {   

        var e = f.elements[i];   

        if ((e.type == "text" || e.type == "select-one" || e.type == "textarea") && (e.getAttribute("chk") == "true")) {   

            if (e.value == "") {   

                alert(e.getAttribute("fieldname") + msg);   

                e.focus();   

                return false;   

            } else if (e.getAttribute("regexp") != undefined) {   

                var re = eval(e.getAttribute("regexp"));   

                if (!re.test(e.value)) {   

                    alert(e.getAttribute("fieldname") + "欄位格式錯誤");   

                    e.focus();   

                    return false;   

                }   

            }    

        } else if ((e.type == "radio" || e.type == "checkbox") && (e.getAttribute("chk") == "true")) {   

            var obj = document.getElementsByName(e.name);   

            if (obj.length) {   

                var count = 0;   

                for (var j=0;j<obj.length;j++) {   

                    if (obj[j].checked) {   

                        count++;   

                    }   

                }   

                if (count == 0) {   

                    alert(obj[0].getAttribute("fieldname") + msg);   

                    obj[0].focus();   

                    return false;   

                } else if ((e.getAttribute("min") != undefined) && count < e.getAttribute("min")) {   

                    alert(e.getAttribute("fieldname") + msgMin.replace(/n/,e.getAttribute("min")));   

                    e.focus();   

                    return false;              

                }   

            } else {   

                if (!obj.checked) {   

                    alert(obj[0].getAttribute("fieldname") + msg);   

                    obj.focus();   

                    return false;   

                }   

            }   

        } else if (e.type == "select-multiple" && e.getAttribute("chk") == "true") {   

            var count = 0;   

            for (var j=0;j<e.options.length;j++) {   

                if (e.options[j].selected) {   

                    count++;   

                }   

            }   

            if (count == 0) {   

                alert(e.getAttribute("fieldname") + msg);   

                e.focus();   

                return false;              

            } else if ((e.getAttribute("min") != undefined) && count < e.getAttribute("min")) {   

                    alert(e.getAttribute("fieldname") + msgMin.replace(/n/,e.getAttribute("min")));   

                    e.focus();   

                    return false;              

            }   

        }      

    }   

    return true;       

}
</SCRIPT>

-- 程式碼參考 - 結束 --

資料來源: DoReMiCAT http://blog.doremicat.com/?p=101


創作者介紹

經驗交流分享與備忘

Frank 發表在 痞客邦 PIXNET 留言(0) 人氣()