作者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