开发总结(2)---Javascript

    本文是我在平时工作中所遇到的javascript方面的一些知识总结,主要针对在asp.net中使用脚本
1.TextBox的验证(这个其实算是正则的内容了)
<!--用正则表达式限制只能输入中文-->  
<input type="text" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"   onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"  />


<!--用正则表达式限制只能输入数字-->  
<input type="text" onkeyup="value=value.replace([^\d]/g,'') "  onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"  />

<!--用正则表达式限制只能输入数字和英文-->  
<input type="text" onkeyup="value=value.replace([\W]/g,'') "   onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"  />

 
<!--驗證數字和小數點-->
<input   type="text"  ID="Text1"   onkeyup="value=value.replace(/[^\d|^\.]/g,'')"   onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d|^\.]/g,''))">
//去空格
function trim(str)
{
   
return str.replace(/(^\s*)|(\s*$)/g,"");    
}
 

 其中 onbeforepaste属性是防止复制粘贴

//validate email
function IsMail(mail) 

    
var patrn = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/
    
return patrn.test(mail);
}


//validate url
function IsURL(url)
{
     
var regexp = /^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/;
     return regexp.test(url);



2. 判断CheckBoxList有没有选择

//id为CheckBoxList控件的ID
//
return true 说明没有选择
function checkLocCate(id)
{
    
var status=true;
    
var inputs=document.getElementById(id).getElementsByTagName("input");
    
for(var i=0;i<inputs.length;i++)
    
{
        
if(inputs[i].type=="checkbox" && inputs[i].checked==true)
        
{
            status
=false;
        }

    }

    
return status;
}

3.为DropDownList添加项
//id为DropDownList控件的ID
function addOptions(id)
{
    
var ddl=document.getElementById(id);
    
//将DropDownList的内容清空
    ddl.options.length=0;
    
for(var i=0;i<10;i++)
    
{
        
//Options的第一个参数为Text值,第二个参数为Value值
        ddl.add(new Option(i,i));
    }
 
}

4.为table添加行和列
  在javascript中添加行和列是通过insertRow和inertCell来实现的,看下面一个例子
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    
<title>AddRow</title>
    
<style type="text/css">
        .BlackBorder
{ background-color:#000; font-size:12px;}
        .BlackBorder tr
{ background-color:#fff;}
    
</style>
</head>
<body>
    
<form id="form1" runat="server">
    
<div>
        
<table width="400px">
            
<tr>
                
<td>
                    姓名:
                    
<input id="txtName" style="width:100px;" />  
                    年龄:
                    
<input id="txtAge" style="width:50px;"  />  
                    
<input id="txtAdd" type="button" value="新增" onclick="return insertRow()"/>
                
</td>
            
</tr>
            
<tr>
                
<td>
                    
<table id="tMemInfo" width="100%" class="BlackBorder" cellpadding="0" cellspacing="1" border="0" style="padding-left:5px;">
                        
<tr style=" background-color:#E0E0E0;">
                            
<td style="width:150px;">
                                姓名
                            
</td>
                            
<td style="width:100px;">
                                年龄
                            
</td>
                            
<td>
                                管理
                            
</td>
                        
</tr>
                    
</table>
                
</td>
            
</tr>
        
</table>
        
    
</div>
    
</form>
    
<script type="text/javascript">

function insertRow()
{
    
    
var name=document.getElementById("txtName").value;
    
var age=document.getElementById("txtAge").value;
    
    
if(name=="")
    
{
        alert(
"請填寫姓名");
        document.getElementById(
"txtName").focus();
        
return false;
    }

    
if(age=="")
    
{
        alert(
"請填寫年龄");
        document.getElementById(
"txtAge").focus();
        
return false;
    }


    
var myTable=document.getElementById("tMemInfo");
    
var objRow = myTable.insertRow(1); 
    
var objCell = objRow.insertCell(0);  
    objCell.innerHTML
= "<input type='text' style='width:100px;' style='display:none'/><span >"+name+"</span>";
    
var objCell = objRow.insertCell(1); 
    objCell.innerHTML
="<input type='text' style='width:50px;'  style='display:none'/><span >"+age+"</span>";
    
var objCell = objRow.insertCell(2);
    objCell.innerHTML
=" <input type='button' value='取消' onclick='cancel()' style='display:none'/> "+
                      
" <input type='button' value='儲存' onclick='save()' style='display:none'/>" +
                      
" <input type='button' value='修改' onclick='edit()'  />" +
                      
" <input type='button' value='删除' onclick='deleteRow()' />";
                      
    document.getElementById(
"txtName").value="";
    document.getElementById(
"txtAge").value="";
    document.getElementById(
"txtName").focus();
}


//删除行
function deleteRow()
{
    
var myTable=document.getElementById("tMemInfo");
    
var trList =myTable.getElementsByTagName("tr");
    
var row = 0;
    
for(var i = 0; i < trList.length ; i++)
    
{
        
if(event.srcElement.parentNode.parentNode == trList[i])
            row 
= i;
    }

    myTable.deleteRow(row);
}


function cancel()
{
    
var e=event.srcElement.parentElement.parentElement;
    e.childNodes[
0].childNodes[0].style.display="none";
    e.childNodes[
0].childNodes[1].style.display="";
    e.childNodes[
1].childNodes[0].style.display="none";
    e.childNodes[
1].childNodes[1].style.display="";
    e.childNodes[
2].childNodes[0].style.display="none";
    e.childNodes[
2].childNodes[2].style.display="none";
    e.childNodes[
2].childNodes[4].style.display="";
    e.childNodes[
2].childNodes[6].style.display="";
    
}


function save()
{
    
var e=event.srcElement.parentElement.parentElement;
    e.childNodes[
0].childNodes[0].style.display="none";
    e.childNodes[
0].childNodes[1].style.display="";
    e.childNodes[
1].childNodes[0].style.display="none";
    e.childNodes[
1].childNodes[1].style.display="";
    e.childNodes[
2].childNodes[0].style.display="none";
    e.childNodes[
2].childNodes[2].style.display="none";
    e.childNodes[
2].childNodes[4].style.display="";
    e.childNodes[
2].childNodes[6].style.display="";
    e.childNodes[
0].childNodes[1].innerHTML=e.childNodes[0].childNodes[0].value;
    e.childNodes[
1].childNodes[1].innerHTML=e.childNodes[1].childNodes[0].value;
}


function edit()
{
    
var e=event.srcElement.parentElement.parentElement;
    e.childNodes[
0].childNodes[0].style.display="";
    e.childNodes[
0].childNodes[1].style.display="none";
    e.childNodes[
1].childNodes[0].style.display="";
    e.childNodes[
1].childNodes[1].style.display="none";
    e.childNodes[
2].childNodes[0].style.display="";
    e.childNodes[
2].childNodes[2].style.display="";
    e.childNodes[
2].childNodes[4].style.display="none";
    e.childNodes[
2].childNodes[6].style.display="none";
    e.childNodes[
0].childNodes[0].value=e.childNodes[0].childNodes[1].innerHTML;
    e.childNodes[
1].childNodes[0].value=e.childNodes[1].childNodes[1].innerHTML;
}

</script>
</body>
</html>

5 在javascript中setTimeOut和setInterval的區別

//1秒钟执行一次函数1
window.setInterval("函數1",1000);

//延迟1秒钟执行函数2
window.setTiemout("函數2",1000);


6 js获取字符串的长度

Code


不断更新中......

posted @ 2008-05-25 17:35 oec2003 阅读(1198) 评论(11)  编辑 收藏 网摘 所属分类: Javascript

  回复  引用  查看    
#1楼2008-05-25 20:58 | niat_alex      
3Q~收藏

  回复  引用  查看    
#2楼2008-05-26 10:10 | ︷起↘嚸.      
阿弥陀佛~! 我又要偷东西了,
  回复  引用  查看    
#3楼[楼主]2008-05-26 10:41 | oec2003      
@niat_alex
不客氣,共同學習

  回复  引用  查看    
#4楼[楼主]2008-05-26 10:41 | oec2003      
@︷起↘嚸
:)

  回复  引用    
#5楼2008-05-26 11:31 | 东山[未注册用户]
受益!!谢谢!!
  回复  引用  查看    
#6楼[楼主]2008-05-26 17:35 | oec2003      
@东山
不客氣,呵呵

  回复  引用    
#7楼2008-05-31 16:31 | 上海网站建设,[未注册用户]
上海网站建设,上海网站建设公司,上海网页设计,上海网页设计公司,上海网页制作,上海网页制作公司,上海网站制作
http://www.021doweb.com/

  回复  引用  查看    
#8楼2008-06-11 10:09 | westhot      
嗯 好 很实用!
  回复  引用  查看    
#9楼2008-06-14 10:51 | 秋风      
贴标签
  回复  引用    
#10楼2008-09-10 10:42 | izhaohe[未注册用户]
好,很好。
  回复  引用    
#11楼2009-01-20 10:20 | wdyday[未注册用户]
歪瑞 古达!



发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1206963




相关文章:

相关链接: