Javascript开发相关知识总结

本文是作者在平时工作中所做的javascript方面的一些知识总结,主要针对在asp.net中使用脚
首页 新闻资讯 行业资讯 Javascript开发相关知识总结

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,''))"  />
  • 1.

  • 2.

  • 3.

  • 4.

复制

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

  • 2.

  • 3.

复制

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

  • 2.

  • 3.

复制

<!--驗證數字和小數點-->
<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,"");    
}
  • 1.

  • 2.

  • 3.

  • 4.

  • 5.

  • 6.

  • 7.

  • 8.

  • 9.

其中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);
}
  • 1.

  • 2.

  • 3.

  • 4.

  • 5.

  • 6.

  • 7.

  • 8.

  • 9.

  • 10.

  • 11.

  • 12.

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
  • 1.

  • 2.

  • 3.

  • 4.

  • 5.

  • 6.

  • 7.

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));
    } 
}
  • 1.

  • 2.

  • 3.

  • 4.

  • 5.

  • 6.

  • 7.

  • 8.

  • 9.

  • 10.

  • 11.

  • 12.

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>
  • 1.

  • 2.

  • 3.

  • 4.

  • 5.

  • 6.

  • 7.

  • 8.

  • 9.

  • 10.

  • 11.

  • 12.

  • 13.

  • 14.

  • 15.

  • 16.

  • 17.

  • 18.

  • 19.

  • 20.

  • 21.

  • 22.

  • 23.

  • 24.

  • 25.

  • 26.

  • 27.

  • 28.

  • 29.

  • 30.

  • 31.

  • 32.

  • 33.

  • 34.

  • 35.

  • 36.

  • 37.

  • 38.

  • 39.

  • 40.

  • 41.

  • 42.

  • 43.

  • 44.

  • 45.

  • 46.

  • 47.

  • 48.

  • 49.

  • 50.

  • 51.

  • 52.

  • 53.

  • 54.

  • 55.

  • 56.

  • 57.

  • 58.

  • 59.

  • 60.

  • 61.

  • 62.

  • 63.

  • 64.

  • 65.

  • 66.

  • 67.

  • 68.

  • 69.

  • 70.

  • 71.

  • 72.

  • 73.

  • 74.

  • 75.

  • 76.

  • 77.

  • 78.

  • 79.

  • 80.

  • 81.

  • 82.

  • 83.

  • 84.

  • 85.

  • 86.

  • 87.

  • 88.

  • 89.

  • 90.

  • 91.

  • 92.

  • 93.

  • 94.

  • 95.

  • 96.

  • 97.

  • 98.

  • 99.

  • 100.

  • 101.

  • 102.

  • 103.

  • 104.

  • 105.

  • 106.

  • 107.

  • 108.

  • 109.

  • 110.

  • 111.

  • 112.

  • 113.

  • 114.

  • 115.

  • 116.

  • 117.

  • 118.

  • 119.

  • 120.

  • 121.

  • 122.

  • 123.

  • 124.

  • 125.

  • 126.

  • 127.

  • 128.

  • 129.

  • 130.

  • 131.

  • 132.

  • 133.

  • 134.

  • 135.

  • 136.

  • 137.

  • 138.

  • 139.

  • 140.

  • 141.


5.在javascript中setTimeOut和setInterval的区別

复制

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

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

  • 2.

  • 3.

  • 4.

  • 5.

6.js获取字符串的长度

复制

var str= str.replace(/[^\x00-\xff]/g, "**").length;
  • 1.

【编辑推荐】

  1. Javascript面向对象基础以及接口和继承类的实现

  2. 使用JavaScript更新UpdatePanel

  3. JavaScript常用的2种定义类的方式