JS實現限制正文框元件正文長度

1.1 問題描述

在實際填報程式中，對於單據類的編號的填報，可能編碼為標準格式，有固定的長度，例如手機號碼，固定 11 位數。

在填報這類內容時，當欄位超過特定的值時，如何設定提醒填報人呢？如下圖所示：

1.2 實現思路

「文字框元件」新增「編輯後」事件，實時監視當前正文框中正文長度，如果長度大於設定的長度，彈窗提醒且正文框中只保留符合長度規範的內容。

2.1 範本準備

建立範本，在 A1 儲存格新增「文字框元件」，如下圖所示：

2.2 新增事件

校驗長度可以直接在 JS 中使用固定數字長度，也可以使用參數，給參數一個固定的數字長度。

2.2.1 在 JS 中固定長度

點選選擇 A1 儲存格「文字元件」，在「元件設定>事件」處，新增一個「編輯後」事件，實現校驗功能，如下圖所示：

JavaScript 程式碼如下：

說明：編輯後事件會在每輸入一個字元後觸發，即每輸入一個字元，就對目前正文框的長度進行一次校驗。

var data=this.getValue();
//獲取到儲存格的值
var len=data.length;
//判斷值的長度
if(len>7)
{
_g().setCellValue("A1",null,data.substr(0,7));
//如果儲存格值長度超過7位,就截取前7位重新指派給正文框
//A1對應報表中,元件所在儲存格位置
alert("最長為7位");//彈窗顯示
}

注：當需要校驗的資料的長度有變化時，修改 JS 中數字校驗長度即可。

2.2.2 透過參數設定長度

1）透過新增參數設定長度，在新增「編輯後」事件前，需先新增一個「範本參數」，如下圖所示，新增參數 maxlen 。

2）新增「編輯後」事件， JS 內容需要修改，JS 中不用固定數字長度，使用參數。如下圖所示：

JavaScript 程式碼如下：

var data=this.getValue();
//獲取到儲存格的值
var len=data.length;
//判斷值的長度
if(len>Number(maxlen))
{
_g().setCellValue("A1",null,data.substr(0,Number(maxlen)));
//如果儲存格值長度超過10位,就截取前10位
//A1對應報表中,元件所在儲存格位置
alert("最長為"+Number(maxlen)+"位");
}

2.3 預覽效果

儲存範本，選擇填報預覽，效果如 1.1 節所示。

注：不支援行動端。

點選下載範本：JS實現限制正文框元件正文長度.cpt

注：此範本為透過參數設定長度的範本。