日期:2014-05-16  浏览次数:20519 次

JavaScript 高级程序设计 表单和数据完整性

1. 创建表单是为了满足用户向服务器发送数据的需求。

?

2. HTML表单是通过<form/>元素定义的,特性如下:
(1)method 浏览器发送GET请求或是POST请求

(2)action 表单所要提交到的地址URL

(3)enctype 想服务器端发送数据时,数据应该使用的编码方法。如果要上传文件,设置成multipart/form-data

(4)accept 当上传文件时,列出服务器能正确处理的mime类型。

(5)accept-charset 当提交数据时,列出服务器接受的字符编码

?

3. 文本框事件: ?

change 当用户更改内容后文本框失去焦点时发生 ? blur失去焦点就触发

select 当一个或多个字符被选中时发生

?

如果文本不变,但文本框失去焦点,那么只有blur事件被触发;如果文本发生变化,则先触发change事件,在触发blur事件

<input type="text" ?id="txt1" value="xxxx" onblur="alert('blur')" onchange="alert('change')"> <br />

?

4. ?列表框和组合框

?

<select id="selAge" name="selAge" size="3">

?? ? ? ? ? ?<option value="1">18-21</option> ? ?value用来确定控件所有可能的值,所选的选项可将它的value指定

?? ? ? ? ? ?<option value="2">22-25</option> 给控件,发送到服务器。

?? ? ? ? ? ?<option value="3">26-29</option>

?? ? ? ? ? ?<option value="4">30-35</option>

?? ? ? ? ? ?<option value="5">Over</option>

?? ? ? ?</select>

?

5. ?对单列表格进行排序

    <html>
	<head>
        <title></title>
        <script language="javascript" type="text/javascript">        
            function sortTable(sTableID)
            {
                var oTable=document.getElementById("tblSort");
                var oTBody=oTable.tBodies[0];
                var colDataRows=oTBody.rows;    //rows是个DOM集合,并非数组,不能用sort()方法。
                var aTRs=new Array;                
                for(var i=0;i<colDataRows.length;i++){
                    aTRs.push(colDataRows[i]);
                }
                
                aTRs.sort(compareTRs);
                
                var oFragment=document.createDocumentFragment();
                for(var i=0;i<aTRs.length;i++){
                    oFragment.appendChild(aTRs[i]);
                }
                oTBody.appendChild(oFragment);               
            
            }
            function compareTRs(oTR1,oTR2)
            {
                var sValue1=oTR1.cells[0].firstChild.nodeValue;
                var sValue2=oTR2.cells[0].firstChild.nodeValue;
                
                return sValue1.localeCompare(sValue2);
            }
       </script>
    </head>
    <body>
        <input type="button" value="点击" onclick="sortTable(tblSort)">        
        <table border="1" id="tblSort">
            <thead>
                <tr>
                    <th>Last Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Smith</td>
                </tr>
                <tr>
                    <td>Johnson</td>
                </tr>
                <tr>
                    <td>Henderson</td>
                </tr>
                <tr>
                    <td>Williams</td>
                </tr>
                <tr>
                    <td>Gilliam</td>
                </tr>
                &