開發總結(2)—JavaScript

來源:互聯網
上載者:User

本文是我在平時工作中所遇到的javascript方面的一些知識總結,主要針對在asp.net中使用指令碼
1.TextBox的驗證(這個其實算是正則的內容了)

<!--用Regex限制只能輸入中文--><input type="text" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"   onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))" /><!--用Regex限制只能輸入數字--><input type="text" onkeyup="value=value.replace([^\d]/g,'') "  onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" /><!--用Regex限制只能輸入數字和英文--><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,''))"><script type="text/javascript">//去空格function trim(str){ return str.replace(/(^\s*)|(\s*$)/g,"");    }// 其中onbeforepaste屬性是防止複製粘貼//validate emailfunction IsMail(mail) {  var patrn = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/;  return patrn.test(mail);}//validate urlfunction IsURL(url){ var regexp = /^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/;     return regexp.test(url);} </script>

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控制項的IDfunction 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 id="Head1" 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="form2" 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秒鐘執行一次函數1window.setInterval("函數1", 1000);//延遲1秒鐘執行函數2window.setTiemout("函數2", 1000);

6 js擷取字串的長度

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

不斷更新中......

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.