在SharePoint的使用過程中，我們經常需要為表單頁面做一些特殊處理，比如說新建頁面的時候有多選項的字段，但是只能選擇指定數量的選項，尤其在新聞列表或者調查列表等特殊場景中，廣泛使用。

　　下面，我們就演示一下，如何利用JavaScript腳本，在前臺處理這樣的問題；特別強調，如果User是比較熟悉Web開發的高手，熟悉各種瀏覽器提供的前臺修改Html頁面的工具的話，這樣的方式就屬于小兒科了，我們就需要在列表上綁定EventReceiver，強制不符合條件的數據，不能保存。

　　創建示例需要的列表，這里主要定制新建頁面，選擇News Type的時候，不能超過2個選項。示例列表如下，只有Title、Body、News Type三個字段，還有列表庫自帶的字段。

　　這里我們使用Jquery腳本，因為操作起來比JavaScript更加方便，我們添加腳本可以使用內容編輯器WebPart，或者使用SharePoint Designer直接打開SharePoint的NewForm.aspx頁面，均可以。我們這里使用SharePoint Designer打開，因為寫代碼和修改起來都相對比較方便。

　　同時，我們也演示一下如何使用內容編輯器添加腳本，方便大家進行不同的嘗試，如下圖：

　　首先點擊右上角小齒輪，如果沒有這個按鈕，說明你的權限只是訪問者，需要有編輯頁面權限的用戶；點擊編輯頁面進入編輯狀態。

　　點擊頁面上的添加WebPart，選擇內容編輯器WebPart，步驟如下圖：

　　我們首先會編輯這個WebPart，點擊“Edit Web Part”，如下圖：

　　一般會編輯Title屬性和Chrome Type，前者一般寫清這個部件的作用，后者是去掉部件的標題和邊框（我這里為了美觀，去掉了中間寬和高的設置，大家別見怪）；

　　然后選中WebPart，點擊Ribbon菜單上的編輯源，在里面添加代碼即可，如下圖：

　　有時也需要點擊“Click here to add new content”，才能看到上面的Ribbon，看不到的就試試吧。

　　使用WebPart的方式就是上面的介紹了，下面我們使用SharePoint Designer添加腳本（腳本添加到Content Editor WebPart同樣適用）：

　　打開SharePoint Designer，選中Open Site，如果之前已經打開過，可以在Recent Site里選擇，即可：

　　在Site name中填寫我們的網站集地址，點擊Open可以打開網站，可能會彈出登陸框需要登錄，輸入windows賬號的用戶名和密碼（e.m：domain/linyu password）；

　　然后找到表單存在的位置，注意路徑，如下圖：

　　右鍵需要修改的頁面，在高級模式下編輯這個頁面，如下圖：

　　一般會先添加Jquery的引用，然后編寫腳本，如下圖：

　　下面是保存后的頁面演示，只可以勾選兩個選項，如下圖：

　　下面是另一種演示，就是可以勾選多個，但是不能保存，會提示（具體區別請參照腳本），如下圖：

　　完整的腳本部分，由于自己并不是專業的前端開發，可能腳本寫的比較粗糙，大家見諒，如下：

1 <script type="text/javascript"> 2 $(function(){ 3 //添加新的SaveButton，同時隱藏舊的SaveButton 4 $("#onetIDListForm input[type='button'][value='Save']").before("<input type='button' class='newSaveButton ms-ButtonHeightWidth' value='Save'></input>").hide(); 5 6 //如果選項大于2，就不讓選擇新的選項了 7 $("#onetIDListForm input[type='checkbox'][id^='NewsType']").change(function(){ 8 if($("#onetIDListForm input[type='checkbox'][id^='NewsType']:checked").length > 2) 9 { 10 $(this).removeAttr("checked"); 11 alert("News Type選項不能超過2，如果需要新的選項，請去掉不需要的選項"); 12 //$("#onetIDListForm input[type='checkbox'][id^='NewsType']:checked:first").removeAttr("checked"); 13 } 14 }); 15 16 //為新添加的SaveButton綁定click事件，如果選項大于2提示，如果不大于2，點擊默認的SaveButton 17 $("#onetIDListForm .newSaveButton").click(function(){ 18 if($("#onetIDListForm input[type='checkbox'][id^='NewsType']:checked").length > 2) 19 { 20 alert("News Type選項不能超過2，如果需要新的選項，請去掉不需要的選項"); 21 } 22 else 23 { 24 $("#onetIDListForm input[type='button'][value='Save'][id$='SaveItem']").click(); 25 } 26 27 }) 28 }); 29 </script>

　　完整的代碼截圖，如下圖：

后記

　　其實，整個過程比較簡單，最近發現很多人在問，如何在頁面里添加WebPart，如何在WebPart添加腳本，怎么控制頁面上的相關元素；所以，自己舉一個簡單的例子，給需要的人一個參考吧。

　　不是什么高深的東西，但是也希望有一丟丟價值，覺得不錯的，幫忙點個贊吧！

總結

以上是生活随笔為你收集整理的SharePoint 使用脚本为表单绑定事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。