[JavaScript] 10.JS 表单操作

来源：互联网发布：画化学分子式的软件编辑：程序博客网时间：2024/06/05 08:40

获取表单对象

利用表单在文档中的索引或表单的name属性来引用表单

document.forms[i] //得到页面中的第i个表单。

document.forms[formName] //得到页面中相应name的表单

利用表单的id属性：

document.getElementById(formId);

document.formName;

常用属性

属性描述

action 返回或者设置action属性

elements 获取一个数组，包括该表单中所有的表单域

length 返回表单的表单域的数量

method 返回或设置表单的method属性

name 返回或设置表单的name属性

Form对象的方法

方法描述

submit() 相当于单击submit按钮，表示表单提交到指定页面

reset() 相当于单击reset按钮，表示所有表单域到初始值

Form对象的事件

事件描述

onsubmit 在表单提交之前触发

onreset 在表单被重置之前触发

表单域通用方法

引用表单域的四种方法

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-8" />                   <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-8" />                   <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;   //返回的是一个数组//                                  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-8" />                   <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-10         密码长度为：5-10         确认密码框必须跟密码框的值相等         爱好：学js，用js，教js。 必须至少选中一项不符合，旁边给出提示。并且不能提交！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-8">                   <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-10";                                               uname_ok= false;                                     }                                     if(pwd1.length<5||pwd1.length>10){                                               document.getElementById("pwd1Error").innerHTML= "密码长度应在5-10";                                               pwd1_ok= false;                                     }                                     if(pwd1!=pwd2){                                               document.getElementById("pwd2Error").innerHTML= "两次输入密码不一致！";                                               pwd2_ok= false;                                     }                                                                         for(vari=0;i<fs.length;i++){                                               if(fs[i].checked){                                                        fs_no= true;  //如果有一个被选中！                                                        break;                                               }                                     }                                     if(!fs_no){                                               document.getElementById("favoriteError").innerHTML= "请至少选择一个爱好！";                                     }                                                                          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>

业务思想

表单操作无非是交互的必要性设计，冲浪的时候，早已是见多不惊。但真正到自己设计的时候呢，不同的观点，略有不同，但实质很简单，根据可用性设计原则，设计出优美的表单，还是很重要的。

1 0