使用方式:在需要檢查的欄位中放入 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
留言列表
Banana-Pi, 樹梅派應用 
