第七、JavaScript表单编程

 

第七章 JavaScript表单编程

一、表单：

代码示例：

<form id="user" name="user" action="#" method="post">
<input id="bu" type="button" />
</form>

 

（一）获取表单

var f = document.getElementById("user");
var f1 = document.getElementsByTagName("form")[0];
var f2 = document.getElementsByName("user")[0];
var f3 = document.user;
var f4 = document.forms[0];
var f5 = document.forms["user"];

 

（二）获取表单中的元素

var b = document.getElementById("bu");
var b1 = f.getElementsByTagName("input")[0];
var b2 = f.bu;
var b3 = f.elements[0];
var b4 = f.elements["bu"];

 

二、文本框

（一）onfocus

（二）onchange

<input id="txt" type="text" value="请输入用户名" onfocus="tt()" onchange="cc()" />
<script type="text/javascript">
function tt(){
var txt = document.getElementById("txt");
txt.value = "";
txt.onfocus = "";
}
function cc(){
var txt = document.getElementById("txt");
if(txt.value.length<6){
alert("too short!")
}
}
</script>

 

（三）select()

function tt(){
var txt = document.getElementById("txt");
txt.select();
}

 

三、列表框、组合框

（一）列表框

onchange事件监听：

var test= document.getElementById("test");

test.options[test.selectedIndex];  //test.selectedIndex 为选中项索引

（二）组合框

function getMultiArr(selectObj){
var selectArr = new Array();//存入多选框选中索引
for(i=0;i<selectObj.options.length;i++){
if(selectObj.options[i].selected == true){
selectArr.push(i);
}
}
return selectArr;
}

 

（三）添加、删除、移动、上下移动函数集合

var listUtil = new Object();
//返回组合框中选中项的索引数组 参数：组合框对象
listUtil.getSelectedIndex = function(selectEle){
if(arguments.length==1){
var selectedArr = new Array();
for(i=0;i<selectEle.length;i++){
if(selectEle.options[i].selected){
selectedArr.push(i);
}
}
return selectedArr;
}
};
//在一个select元素下面追加新的option 参数：selectEle select元素、opText option文本节点内容、opValue option属性value的值
listUtil.addItem = function(selectEle,opText,opValue){
var option = document.createElement("option");
option.appendChild(document.createTextNode(opText));
if(arguments.length==3){
option.value = opValue;
}
selectEle.appendChild(option);
};
//移除单个选定项 参数：selectEle select元素、index 选定项索引
listUtil.remove = function(selectEle,index){
if(arguments.length==2){
selectEle.remove(index);
}
};
//移除选中项集合 参数：selectEle select元素、indexArr 索引数组
listUtil.removeSelectedArr = function(selectEle,indexArr){
if(arguments.length==2){
//select元素options长度
var length = selectEle.options.length;
for(i=0;i<indexArr.length;i++){
//当长度改变时，select元素options索引重排
var j = (length!=selectEle.options.length)?indexArr[i]-1:indexArr[i];
selectEle.remove(j);
}
}
};
//移除select元素下所有option
listUtil.clear = function(selectEle){
for(i=selectEle.length-1;i>=0;i--){
selectEle.remove(i);
}
};
//移动 参数：从、到、all:boolean为真时移动所有
listUtil.move = function(fromId,toId,all){
var from = document.getElementById(fromId);
var to = document.getElementById(toId);
for(i=0;i<from.options.length;i++){
if(from.options[i].selected||all){
to.appendChild(from.options[i]);
i--;
}
}
};
//向上移动
listUtil.up = function(selectEle){
if(selectEle.selectedIndex>0){
var selectItem = selectEle.options[selectEle.selectedIndex];
var previousItem = selectEle.options[selectEle.selectedIndex - 1];
selectEle.insertBefore(selectItem,previousItem);
}
}
//向下移动
listUtil.down = function(selectEle){
if(selectEle.selectedIndex < selectEle.options.length){
var selectItem = selectEle.options[selectEle.selectedIndex];
var nextItem = selectEle.options[selectEle.selectedIndex + 1];
selectEle.insertBefore(nextItem,selectItem);
}
}

 

四、复选框、单选框

需要记住的是：如果要获取选中框的值，先遍历，然后判断checked属性是否为真。

 

五、表单校验时机：

（一）onkeypress 错误发生之前

（二）onchange 错误发生之时

（三）onsubmit 错误发生之后