超级实用的几种表单校验效果收集

＜tr bgcolor='#cccccc'>
＜td colspan='2' height='20' align='center'>＜b>Debug Textarea＜/b>＜/td>
＜/tr>
＜tr>
＜td colspan='2'>
＜table width='95%' border='0' align='center' >
＜tr>
＜td align='center'>＜br />
＜textarea id='txt_ln' name='content' rows='10' style='width:40px;overflow:hidden;height:200px;border-right:0px;text-align:right;line-height:14px' onselectstart='this.nextSibling.focus();return false' readonly>＜/textarea>＜textarea id='txt_main' name='content' rows='10' cols='80' onkeydown='editTab()' onkeyup='show_ln()' onscroll='show_ln()' wrap='off' style='overflow:auto;height:200px;padding-left:5px;border-left:0px;line-height:14px'>＜/textarea>
＜script>for(var i=1; i＜=20; i++) document.getElementById('txt_ln').value += i + '\n';＜/script>
＜/td>
＜/tr>
＜tr>
＜td align='center'>＜br />
＜input type='button' value=' 运 行 ' onclick='runcode()' accesskey='r'>  
＜input type='button' value=' 保 存 ' onclick='savecode()' accesskey='s'>  
＜input type='button' value=' 跳 转 ' onclick='goto(prompt('Please input the line number', '1'))' accesskey='g'>  
＜/td>
＜/tr>
＜/table>
＜/td>
＜/tr>
＜/table>
＜/BODY>
＜/HTML>

*************************************************************

TAB键在文本域中的体现

 

 

程序代码：＜script> function editTab() { var code, sel, tmp, r var tabs='' event.returnValue = false sel =event.srcElement.document.selection.createRange() r = event.srcElement.createTextRange() switch (event.keyCode) { case (8) : if (!(sel.getClientRects().length > 1)) { event.returnValue = true return } code = sel.text tmp = sel.duplicate() tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) sel.setEndPoint('startToStart', tmp) sel.text = sel.text.replace(/^\t/gm, '') code = code.replace(/^\t/gm, '').replace(/\r\n/g, '\r') r.findText(code) r.select() break case (9) : if (sel.getClientRects().length > 1) { code = sel.text tmp = sel.duplicate() tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) sel.setEndPoint('startToStart', tmp) sel.text = '\t'+sel.text.replace(/\r\n/g, '\r\t') code = code.replace(/\r\n/g, '\r\t') r.findText(code) r.select() } else { sel.text = '\t' sel.select() } break case (13) : tmp = sel.duplicate() tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) tmp.setEndPoint('endToEnd', sel) for (var i=0; tmp.text.match(/^[\t]+/g) && i＜tmp.text.match(/^[\t]+/g)[0].length; i++) tabs += '\t' sel.text = '\r\n'+tabs sel.select() break default : event.returnValue = true break } } ＜/script> ＜textarea cols=75 rows=20 onkeydown='editTab()'> ＜script> alert('ok') ＜/script>＜/textarea>

*************************************************************

 

 

 

获取input的非value值，而是显示文本值

 

程序代码：
＜select name='sss' onChange='alert(this.options[this.selectedIndex].text)'>
＜option value='1'>asdf＜/option>
＜option value='2'>bbbb＜/option>
＜option value='3'>ccc＜/option>
＜/select>

*************************************************************

 

 

 

select里的option进行分类列表

 

程序代码：
＜span style='position:absolute;border:1px inset #d3d6d9'>＜select style='margin:-2px; width:200px'>
＜option selected>------------请选择------------＜/option>
＜optgroup label='JavaScript&VBScript区'>
＜option>原 创
＜option>经 典
＜optgroup label='后台区'>
＜option>asp&sql
＜option>php&mysql
＜/select>＜/span>

*************************************************************

动态添加

 

程序代码：＜form name='myForm' method='post'> ＜select name='dept_company' size='10' multiple id='dept_company' class='mySelect'> ＜option value=''>Please Select...＜/option> ＜option value='a'>AA＜/option> ＜option value='b'>BB＜/option> ＜option value='c'>CC＜/option> ＜/select>＜input name='dept_company_list' type='hidden'> ＜input name='button' type='button' class='myButton' onClick='addItem('dept_company','dept_company2')' value='添加-->>'> ＜input name='button' type='button' class='myButton' onClick='deleteItem('dept_company2','dept_company')' value='<<--删除'> ＜select name='dept_company2' size='10' multiple id='dept_company2' class='mySelect'> ＜/select> ＜/form> ＜script> function addItem(fromName,toName){ eval('var obj1=myForm.'+fromName); eval('var obj2=myForm.'+toName); obj1.options[0].selected=false; if(obj1.selectedIndex == -1) return false; var tempValue; var tempText; for(var i=1;i＜obj1.length;i++){ //begin from 1 if(obj1.selectedIndex == -1)break; tempValue=obj1.options[obj1.selectedIndex].value; tempText=obj1.options[obj1.selectedIndex].text; obj1.options[obj1.selectedIndex]=null; obj2.add(new Option(tempText,tempValue),0); } } function deleteItem(fromName,toName){ eval('var obj1=myForm.'+fromName); eval('var obj2=myForm.'+toName); if(obj1.selectedIndex == -1) return false; var tempValue; var tempText; for(var i=0;i＜obj1.length;i++){ //begin from 0 if(obj1.selectedIndex == -1)break; tempValue=obj1.options[obj1.selectedIndex].value; tempText=obj1.options[obj1.selectedIndex].text; obj1.options[obj1.selectedIndex]=null; obj2.add(new Option(tempText,tempValue),1); //addItem index is 1 } } ＜/script>

 如果您对本文有任何疑问或者建议，请到讨论区发表您的意见: >> 论坛入口 <<

上一页 1 2 3 45 下一页

上一篇：揭开正则表达式的神秘面纱   下一篇：浅议Web网页Form表单设计技巧

【文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【我要投稿】 【论坛讨论】