Javascript 操作表单域的两个重要技巧 By shawl.qiu

Javascript 操作表单域的两个重要技巧 By shawl.qiu


说明: 
技巧一:
当表单提交或重置时向客户端进行确认操作

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

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

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

shawl.qiu
2006-10-29
http://blog.csdn.net/btbtd

目录:
1. 当表单提交或重置时向客户端进行确认操作
  1. linenum
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <script type="text/javascript">
  4. //<![CDATA[
  5.     function fCfm(msg){
  6.         if(confirm(msg))return true;
  7.         return false;
  8.     } // shawl.qiu script
  9. //]]>
  10. </script>
  11. <form name="form1" id="form1" method="get" action=""
  12.     οnsubmit="return fCfm('现在提交数据吗?');"
  13.      οnreset="return fCfm('现在重置表单域所有内容吗?');" >
  14.     
  15.   <input name="textfield" type="text" value="tbx default value" />
  16.   <br />
  17.   <textarea name="textarea">txa default value</textarea>
  18.   <br />
  19.   <input type="submit" name="Submit" value="Submit" />
  20.   <input type="reset" name="Reset" value="Reset" />
  21. </form><br />
  22. <a href="?">back</a>

2. 列出表单域中所有元素及其重要属性
  1. linenum
  2. <script type="text/javascript"> 
  3. //<![CDATA[ 
  4.     function fListFmEle(obj){ 
  5.         try{ w.close(); } catch(e){} 
  6.          
  7.         w=open('', 'popup', 'width=500, height=500, left=200, top=100, scrollbars') 
  8.         w.document.write('<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />'); 
  9.   
  10.         for(var i=0; i<obj.length; i++){ 
  11.             w.document.write('obj name: ',obj[i].name.fontcolor('red'), 
  12.             '<br/>obj type: ',obj[i].type.fontcolor('red'), 
  13.             '<br/>obj.value: ', obj[i].value.fontcolor('blue'), 
  14.             '<p/>'); 
  15.         } 
  16.          
  17.         w.document.οnclick=function(){ w.close(); } 
  18.         w.focus(); 
  19.     } // shawl.qiu script 
  20. //]]> 
  21. </script> 
  22. <a href="#" οnclick="fListFmEle(document.fm);">list form elements</a><p/> 
  23. <form name="fm" id="fm" method="post" action=""> 
  24.       <input name="textfield" type="text" value="tbx value" /><br /> 
  25.     <input type="radio" name="RadioGroup1" value="radio" />Radio<br /> 
  26.     <input type="radio" name="RadioGroup1" value="radio" />Radio<br /> 
  27.     <input name="cbx" type="checkbox" id="cbx" value="checkbox" /> 
  28.     <input name="cbx1" type="checkbox" id="cbx1" value="checkbox" /> 
  29.     <input name="cbx2" type="checkbox" id="cbx2" value="checkbox" /><br /> 
  30.     <select name="select"> 
  31.       <option value="v">opt</option> 
  32.       <option value="v1">opt1</option> 
  33.     </select><br /> 
  34.     <select name="sle1" size="2" multiple id="sle1"> 
  35.       <option value="v">sle</option> 
  36.       <option value="v1">sle1</option> 
  37.       </select><br /> 
  38.     <textarea name="textarea">txa value</textarea><br /> 
  39.     <input type="submit" value="Submit" /> 
  40.     <input type="reset" value="Reset" /> 
  41. </form>


评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值