开发总结(2)—JavaScript

现在的位置: 首页 > 综合 > 正文

开发总结(2)—JavaScript

2012年10月27日 ⁄ 综合 ⁄ 共 5711字 ⁄ 字号小中大 ⁄ 评论关闭

本文是我在平时工作中所遇到的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,''))">
<script type="text/javascript">

//去空格
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);
} 
</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控件的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 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秒钟执行一次函数1
window.setInterval("函數1", 1000);

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

6 js获取字符串的长度

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

不断更新中......

【上篇】舍不得离别的句子
【下篇】控件下载

作者: ultraman

该日志由 ultraman 于12年前发表在综合分类下，最后更新于 2012年10月27日.
转载请注明: 开发总结(2)—JavaScript | 学步园 +复制链接

抱歉!评论已关闭.

学步园

开发总结(2)—JavaScript

作者: ultraman

书签

最新文章New

本站推荐

返回首页