Javascript開發相關知識總結
作者：oec2003
本文是作者在平時工作中所做的javascript方面的一些知識總結，主要針對在asp.net中使用腳本。
1.TextBox的驗證（這個其實算是正則的內容了）
＜!--用正則表達式限制只能輸入中文--＞ ＜input type="text" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepa ＜!--用正則表達式限制只能輸入數字--＞ ＜input type="text" onkeyup="value=value.replace([^\d]/g,'') " onbeforepaste="clipboar ＜!--用正則表達式限制只能輸入數字和英文--＞ ＜input type="text" onkeyup="value=value.replace([\W]/g,'') " onbeforepaste="clipboar ＜!--驗證數字和小數點--＞ ＜input type="text" ID="Text1" onkeyup="value=value.replace(/[^\d|^\.]/g,'')" o |
其中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 |
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獲取字符串的長度
var str= str.replace(/[^\x00-\xff]/g, "**").length; |
【編輯推薦】
責任編輯：楊鵬飛
來源：
博客園
