关闭

[JavaScript] 10.JS 表单操作

1316人阅读 评论(3) 收藏 举报
分类:

获取表单对象

利用表单在文档中的索引或表单的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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:236581次
    • 积分:7643
    • 等级:
    • 排名:第2885名
    • 原创:144篇
    • 转载:16篇
    • 译文:1篇
    • 评论:1291条
    时间,你好!
    网易博客
    Github:Social Coding
    博客专栏
    CNZZ统计