Javascript开发相关知识总结-web前端开发基础知识总结

1.TextBox的验证（这个其实算是正则的内容了）

＜!--用正则表达式限制只能输入中文--＞  
＜input type="text" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"   onbeforepa
ste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9F
A5]/g,''))"  /＞

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

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

＜!--驗證數字和小數點--＞
＜input   type="text"  ID="Text1"   onkeyup="value=value.replace(/[^\d|^\.]/g,'')"   o
nbeforepaste="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

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;

【编辑推荐】