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

2016-02-19 22:17 5 1 收藏

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

【 tulaoshi.com - Web开发 】

  说明:

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

  技巧一:

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

  技巧二:

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

  总结:

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

  目录:

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

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

  目录:

(本文来源于图老师网站,更多请访问http://www.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://www.tulaoshi.com/n/20160219/1628081.html

延伸阅读
标签: 浏览器
两个技巧缓解IE运行缓慢   第一招:禁用相关第三方加载项 虽然浏览器加载项可以增强您的在线体验,但这些加载项有时也会干扰您计算机上的其他软件或与之发生冲突。可能需要使用"管理加载项"来禁用相关的加载项,然后仅在您需要使用加载项时打开加载项。这可让您确定是哪个加载项导致此问题。 第二招:重置IE浏...
标签: 分娩
妙招祝孕妈妈轻松顺产     现在很多的年轻妈妈都会因为害怕疼痛而选择了剖腹产,其实,最好的分娩方式还是顺产。因为顺产不仅对孕妈妈有好处,也对胎宝宝有好处。接下来,我们就来了解下顺产的好处吧! ★★★本文章为123怀孕网独家文章,欢迎大家转载★★★     1、对胎儿的好处...
标签: Web开发
script lanuage="javascript" var global="javascript"; test(); funciton test() { var local="vbscript" document.write("the global is"+gloabl+"br"); document.write("the local is"+local+"br"); } document.write("local"); /script ---------------------------------- 错误local已经释放掉了,它的作用域是函数范围内 script languag...
标签: Web开发
打包下载 自己写了一个很简单的jquery插件,在页面中调用其中的函数就可实现. 插件源代码(listtolist.js): 代码如下: /** fromid:源list的id. toid:目标list的id. moveOrAppend参数("move"或者是"append"): move -- 源list中选中的option会删除.源list中选中的option移动到目标list中,若目标list中已存在则该option不添加. append --...
对iPhone开关机的两个技巧   说起iPhone开机关机的技巧,相信大多数人都会觉得这个太小儿科了,直接按电源键就可以解决它。可是,如果iPhone电源键坏了又碰上有重要的信息需要接收怎么办了,来看看无需电源开关机的几个技巧吧。 一、如何开机? 首先,给iPhone插上数据线,然后长按home键不要松,再将数据线的另外一头...

经验教程

103

收藏

17
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部