[JavaScript] 10.JS 表單操作
來源：程序員人生 發布時間：2016-06-20 08:41:17 閱讀次數：4059次
獲得表單對象
利用表單在文檔中的索引或表單的name屬性來援用表單
document.forms[i] //得到頁面中的第i個表單。
document.forms[formName] //得到頁面中相應name的表單
利用表單的id屬性：
document.getElementById(formId);
document.formName;
經常使用屬性
屬性 描寫
action 返回或設置action屬性
elements 獲得1個數組，包括該表單中所有的表單域
length 返回表單的表單域的數量
method 返回或設置表單的method屬性
name 返回或設置表單的name屬性
Form對象的方法
方法 描寫
submit() 相當于單擊submit按鈕，表示表單提交到指定頁面
reset() 相當于單擊reset按鈕，表示所有表單域到初始值
Form對象的事件
事件 描寫
onsubmit 在表單提交之前觸發
onreset 在表單被重置之前觸發
表單域通用方法
援用表單域的4種方法
form.name; form.elements[i];
form.elements[name]; document.getElementById(id);
disabled：使表單域不能接受用戶的操作，變成只讀
name：獲得或設置表單域的名稱
form：獲得該表單域所屬的表單
value：獲得或設置表單域的值
type：判斷表單域的類型
focus():使表單域取得焦點
blur()：使表單域失去焦點
文本域 (text, password, textarea )
利用value屬性獲得和設置文本域內容
利用defaultValue取得文本域的默許值。reset方法就是調用該屬性。
單選按鈕組和復選框經常使用操作
通過checked屬性取得選中和未選中的狀態。
取得單選按鈕組的值：
只能通過遍歷單選按鈕來獲得被選中的值
復選框的處理類似單選按鈕
Demo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf⑻" />
<title>UntitledDocument</title>
<ScriptLanguage="JavaScript">
function getRadioValue() {
varradioGroup = document.forms[0].r;
// alert(radioGroup.value); //不能想固然用這個。必須遍歷才能取到被選中的單選按鈕的值
// alert(radioGroup.length);
varselected = null;
for(vari=0;i<radioGroup.length;i++) {
if(radioGroup[i].checked){
selected= radioGroup[i];
alert(selected.value);
break;
}
}
}
functiongetCheckboxValue(){
vargroup = document.form1.hobby;
vara1 = new Array();
varj=0;
for(vari=0;i<group.length;i++) {
if(group[i].checked){
alert(group[i].value);
a1[j]=group[i].value;
j++;
}
}
}
</Script>
</head>
<body>
<formname="form1" >
<inputtype="radio" name="r" value="1" >奧迪</input>
<inputtype="radio" name="r" value="2">寶馬</input>
<inputtype="radio" name="r" value="3">勞斯萊斯</input><br>
駕駛技術:<br>
<inputtype="checkbox" name="hobby" value="1">開車</input><br>
<inputtype="checkbox" name="hobby" value="2">開飛機</input><br>
<inputtype="checkbox" name="hobby" value="3">開坦克</input><br>
<inputtype="checkbox" name="hobby" value="4">開輪船</input><br>
<inputtype="button" onclick="getRadioValue();" value="選擇汽車"/><br/>
<inputtype="button" onclick="getCheckboxValue();" value="選擇駕駛技術"/>
</form>
</body>
</html>
下拉列表的使用
使用value屬性獲得和設置下拉列表選當選項的值
使用selectedIndex屬性獲得當前被選當選項的索引
使用options屬性獲得所有選項集合
使用option對象的value屬性和text屬性, 可以讀寫這兩個屬性。
使用option對象的selected屬性選中該option
Demo
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf⑻" />
<title>UntitledDocument</title>
<script>
functionselectValue() {
// varcars = document.forms[0].elements["cars"];
varcars = document.form1.cars;
// alert(cars.value);
// cars.value="6";
// alert(cars.value);
// alert("selectedIndex:"+cars.selectedIndex);
vara = cars.options; //返回的是1個數組
// a[1].text="奇瑞";
// a[1].value="99";
// alert(a[1].text);
// alert(a[1].value);
// vara = cars.options;
// alert(a[1].selected);
// a[1].selected=true;
}
</script>
</head>
<body>
<formname="form1">
<selectname="cars" id="idCars">
<optionvalue="4" selected>勞斯萊斯</option>
<optionvalue="5">寶馬</option>
<optionvalue="6">奔馳</option>
</select>
</form>
<ahref="#" onclick="selectValue();">測試下拉列表</a>
</body>
</html>
表單驗證操作
利用驗證函數的兩種經常使用的方法：
<inputtype="submit" onclick="return validate()"/>
<formaction="a.jsp" onsubmit="return validate()"/>
若返回false,則不提交表單。Demo
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf⑻" />
<title>UntitledDocument</title>
<script>
functionvalidate() {
alert("validate");
//常見的驗證操作
// returnfalse;
returntrue;
}
</script>
</head>
<body>
<formaction="05.html" name="form1">
用戶名:<inputtype="text" name="text1" value=""/>
<inputtype="submit" name="submit1" value="提交"onclick="return validate();"/>
</form>
<br><br>
<formaction="05.html" name="form2" onsubmit="returnvalidate();">
用戶名:<inputtype="text" name="text2" value=""/>
<inputtype="submit" name="submit2" value="提交"/>
</form>
</body>
</html>
注冊表單
用戶名長度為：5⑴0
密碼長度為：5⑴0
確認密碼框必須跟密碼框的值相等
愛好：學js，用js，教js。 必須最少選中1項
不符合，旁邊給出提示。并且不能提交！
Demo
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf⑻">
<title>akali-javascriptform</title>
<script>
functioncheck(frm){
varuname = frm.uname.value;
varpwd1 = frm.pwd1.value;
varpwd2 = frm.pwd2.value;
varfs = frm.favorite;
varfs_no = false;
varuname_ok = true;
varpwd1_ok = true;
varpwd2_ok = true;
document.getElementById("unameError").innerHTML= "";
document.getElementById("pwd1Error").innerHTML= "";
document.getElementById("pwd2Error").innerHTML= "";
document.getElementById("favoriteError").innerHTML= "";
if(uname.length<5||uname.length>10){
document.getElementById("unameError").innerHTML= "用戶名長度應在5⑴0";
uname_ok= false;
}
if(pwd1.length<5||pwd1.length>10){
document.getElementById("pwd1Error").innerHTML= "密碼長度應在5⑴0";
pwd1_ok= false;
}
if(pwd1!=pwd2){
document.getElementById("pwd2Error").innerHTML= "兩次輸入密碼不1致！";
pwd2_ok= false;
}
for(vari=0;i<fs.length;i++){
if(fs[i].checked){
fs_no= true; //如果有1個被選中！
break;
}
}
if(!fs_no){
document.getElementById("favoriteError").innerHTML= "請最少選擇1個愛好！";
}
return uname_ok&&pwd1_ok&&pwd2_ok&&fs_no;
}
</script>
</head>
<body>
<formaction="a.jsp" onsubmit="return check(this);" >
用戶名：<inputtype=text name=uname /> <spanstyle="color:red;" id="unameError"></span><br/>
密碼：<input type=passwordname=pwd1 />
<spanstyle="color:red;" id="pwd1Error"></span>
<br/>
確認密碼：<inputtype=password name=pwd2 />
<spanstyle="color:red;" id="pwd2Error"></span>
<br/>
愛好：<inputtype=checkbox name=favorite value=1 />學js
<inputtype=checkbox name=favorite value=2 />用js
<inputtype=checkbox name=favorite value=3 />教js
<spanstyle="color:red;" id="favoriteError"></span>
<br/>
<inputtype=submit value=提交 />
</form>
</body>
</html>
業務思想
表單操作不過是交互的必要性設計，沖浪的時候，早已經是見多不驚。但真正到自己設計的時候呢，不同的觀點，略有不同，但實質很簡單，根據可用性設計原則，設計出優美的表單，還是很重要的。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
