Javascript 操作表单域的两个重要技巧

cfpanpan

cfpanpan

2016-02-19 22:17

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的Javascript 操作表单域的两个重要技巧教程,一起来看看吧!超容易上手~

  说明:

  技巧一:

  当表单提交或重置时向客户端进行确认操作

  技巧二:

  列出表单域中所有元素及其重要属性, 就是 input, select 等的 name, value 等.

  总结:

  用这两个技巧可以写一个通用的客户端表单验证函数, 至于怎么写, 动动脑筋就行了^^.
但是鄙人还是觉得, 不能过于依赖客户端的验证机制, 现在的人聪明得很, 只要花一点小心思, 就可以避过客户端的一切限制, 鄙人就乐于此道.

  目录:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  1. 当表单提交或重置时向客户端进行确认操作
  2. 列出表单域中所有元素及其重要属性

  目录:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  1. 当表单提交或重置时向客户端进行确认操作

  以下是引用片段:

meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 
script type="text/javascript" 
//![CDATA[ 
    function fCfm(msg){ 
        if(confirm(msg))return true; 
        return false; 
    } // shawl.qiu script 
//]] 
/script 
form name="form1" id="form1" method="get" action="" 
    onsubmit="return fCfm('现在提交数据吗?');" 
     onreset="return fCfm('现在重置表单域所有内容吗?');"  
     
  input name="textfield" type="text" value="tbx default value" / 
  br / 
  textarea name="textarea"txa default value/textarea 
  br / 
  input type="submit" name="Submit" value="Submit" / 
  input type="reset" name="Reset" value="Reset" / 
/formbr / 
a href="?"back/a

  2. 列出表单域中所有元素及其重要属性

  以下是引用片段:
script type="text/javascript"  
//![CDATA[  
    function fListFmEle(obj){  
        try{ w.close(); } catch(e){}  
          
        w=open('', 'popup', 'width=500, height=500, left=200, top=100, scrollbars')  
        w.document.write('meta http-equiv="Content-Type" content="text/html; charset=utf-8" /');  
   
        for(var i=0; iobj.length; i++){  
            w.document.write('obj name: ',obj[i].name.fontcolor('red'),  
            'br/obj type: ',obj[i].type.fontcolor('red'),  
            'br/obj.value: ', obj[i].value.fontcolor('blue'),  
            'p/');  
        }  
          
        w.document.onclick=function(){ w.close(); }  
        w.focus();  
    } // shawl.qiu script  
//]]  
/script  
a href="#" onclick="fListFmEle(document.fm);"list form elements/ap/  
form name="fm" id="fm" method="post" action=""  
      input name="textfield" type="text" value="tbx value" /br /  
    input type="radio" name="RadioGroup1" value="radio" /Radiobr /  
    input type="radio" name="RadioGroup1" value="radio" /Radiobr /  
    input name="cbx" type="checkbox" id="cbx" value="checkbox" /  
    input name="cbx1" type="checkbox" id="cbx1" value="checkbox" /  
    input name="cbx2" type="checkbox" id="cbx2" value="checkbox" /br /  
    select name="select"  
      option value="v"opt/option  
      option value="v1"opt1/option  
    /selectbr /  
    select name="sle1" size="2" multiple id="sle1"  
      option value="v"sle/option  
      option value="v1"sle1/option  
      /selectbr /  
    textarea name="textarea"txa value/textareabr /  
    input type="submit" value="Submit" /  
    input type="reset" value="Reset" /  
/form

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

Javascript 操作表单域的两个重要技巧

Web开发
Javascript 操作表单域的两个重要技巧

JavaScript实现动态增加文件域表单

Web开发
JavaScript实现动态增加文件域表单

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Javascript 跨域表单提交状态的变相判断

Web开发
Javascript 跨域表单提交状态的变相判断

coreldraw两个小技巧

CorelDRAW 电脑应用
coreldraw两个小技巧

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

用JavaScript 处理 URL 的两个函数代码

Web开发
用JavaScript 处理 URL 的两个函数代码

word xp的两个小技巧

办公软件
word xp的两个小技巧

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

用Javascript实现评估用户输入密码的强度

用Javascript实现评估用户输入密码的强度

Win7笔记本怎么做wifi热点共享教程

Win7笔记本怎么做wifi热点共享教程
下拉加载更多内容 ↓