跳至主內容

如何驗證表單內容?

Support Agent
  • 更新於

在眾多表單相關問題當中，有個被反覆詢問的問題：如何驗證表單內容呢？大多數使用者都知道可以設定欄位值來限制值的範圍，但您知道Right PDF Editor/ Gaaiho Doc讓您可以使用簡單的Script （指令碼）來驗證表格嗎？

不過首先讓我們來複習一下如何不用Script就限制欄位值的範圍。舉例來說，只要在文字欄位內容對話框中的「驗證」標籤下設定欄位值最小為50 ，最大100之後，如果此欄位輸入的值低於50或是高於100，就會出現錯誤訊息顯示此為無效值，並且指示此欄位值必須大於或等於50且小於或等於100。

1. 於Right PDF Editor/ Gaaiho Doc 中開啟文件並選擇「表單 > 表單 > 文字欄位」。

2. 於文件上拉出一個文字欄位。在跳出的文字欄位內容對話框中選擇「驗證」標籤並勾選「驗證欄位值」。如果已在「格式」標籤設置此欄位為「數字」欄位，則可直接在「欄位值」設定數值的範圍。

3. 輸入欄位值。

2018-02-08_17-09-54.png

 

如果要執行其他自訂的驗證呢？舉例來說，如果你想要建立一個只能讓使用者輸入文字與空白的欄位，可以參考以下的範例。請注意如果輸入的欄位值包含數字，則會跳出錯誤訊息提示使用者此欄位值的有效範圍。

1. 以Right PDF Editor/ Gaaiho Doc開啟文件並選擇「表單 > 表單 > 文字欄位」。

2. 在文件上拉出文字欄位來開啟文字欄位內容對話框。

3. 在對話框中選擇「驗證」標籤並且勾選「驗證欄位值」選項。接著按一下「執行自訂驗證指令碼」及「編輯…」按鈕。

4. 在「JavaScript 編輯器」對話框輸入以下指令碼:

 

2018-02-08_17-11-43.png

 

或是您可直接複製貼上以下的指令碼：

 var number = /[0-9]/;
if (number.test(event.value))
{
    app.alert("請只填寫漢字、字母和空格");
    event.rc = false;
}

接著我們來看看其他的例子。比如你想要建立只允許輸入數字的「信用卡號碼」欄位，則可參考以下範例。請注意如果輸入的欄位值包含非數字的內容，則會跳出錯誤訊息。

 

2018-02-08_17-13-42.png

 

1. 選擇「表單 > 表單 > 文字欄位」並在文件上拉出文字欄位。小提醒：別忘了在「選項」標籤下設定「組合4 個字元」。

2. 在「驗證」標籤下，按一下「執行自訂驗證指令碼」及「編輯…」按鈕。

3. 在「JavaScript 編輯器」對話框中輸入以下指令碼：

 

2018-02-08_17-14-26.png

 

此指令碼不只驗證此欄位值是否只包含數字，也會檢查每個值的範圍是否都介於0跟9中間。您可直接複製貼上下面的指令碼：

 event.rc = true;
var regex = /^[0-9][0-9][0-9][0-9]$/;
if ( !regex.test(event.value) && event.value)
{
    app.alert("請只填寫數字");
    event.rc = false;
}

 

在這個指令碼中，「value」為當前的欄位值，而「rc」則會回傳驗證結果成功與否。您可能會注意到驗證只在焦點離開欄位時才執行，也就是說你必須要在輸入完內容後按一下Enter鍵或是點一下欄位外才能進行下去。當檢查出錯誤時，無效值會被刪除，讓使用者必須得重新輸入一次正確的欄位值才行。

然而，當您輸入的欄位內容又長又複雜的時候，這的確不是理想的驗證方式。較理想的方式是檢查出錯誤後，保留此錯誤值，讓使用者可以直接修改錯誤之處然後按下Enter，繼續填寫表單。

因此我們可以直接用顏色框出此欄位，讓使用者知道此欄位內的內容必須更正。請看以下的指令碼：

 

 var number = /[0-9]/;
if (number.test(event.value))
{
    app.alert("請只填寫漢字、字母和空格");
    getField("Text7").strokeColor = color.red;
}
else
{
    getField("Text7").strokeColor = color.black;
}

 

接著讓我們來看看如何設定表格中常見的「身分證字號」欄位。這必須限制輸入值的第一位字碼為大寫英文字母，以及第二位為數字1或是2的10碼字號，例如「A123456789」。請注意當使用者輸入不符規定的內容時，系統會彈出錯誤訊息。

1. 選擇表單 > 表單 > 文字欄位並在文件上拉出文字欄位。

2. 在對話框中選擇「驗證」標籤並且勾選「驗證欄位值」選項。接著按一下「執行自訂驗證指令碼」及「編輯…」按鈕。

3. 在「JavaScript  編輯器」對話框中輸入以下指令碼：

 

2018-02-08_17-24-18.png

 

或複製貼上以下指令碼：

event.rc = true;
var regex = /^[A-Z][1-2][0-9]{8}$/;
if ( !regex.test(event.value) && event.value)
{
    app.alert("身份證格式錯誤。請輸入正確的10碼身分證字號");
    event.target.textColor = color.red;
}
else
{
    event.target.textColor = color.black;
}

 

此指令碼「^[A-Z][1-2][0-9]{8}$」的「^ [A-Z]」表示第一個字碼必須是大寫的英文字母，「[1-2]」限制了第二位的字碼必須是1或是2 ，「[0-9] {8}$」表示剩下的八位字碼必須介於0到9。如輸入的欄位值不符合規定，即會出現錯誤訊息顯示「身份證格式錯誤。請輸入正確的10碼身分證字號」，且錯誤將被標以紅色，讓使用者知道此欄位的值需要修正。

您還可在表單的最末端建立一個「驗證並列印」按鈕，方便使用者填完表單後再次檢查是否有遺漏的欄位，若無誤再列印出此表單。此按鈕依照此份表單的欄位架構順序來檢查，如果發現空白欄位，即會跳出錯誤訊息提醒。請注意此驗證功能關係到整份文件的JavaScript，因此在設置按鈕的動作前必須要先設置文件JavaScript。

1. 建立「驗證並列印」按鈕且調整其外觀。

2. 選擇「進階 > JavaScript > 文件JavaScript」，並在JavaScript函數對話框中按一下「新增…」按鈕並為此文件JavaScript命名。按一下「下一頁」。

3. 在JavaScript編輯器對話框中，輸入以下指令碼：

 

 2018-02-08_17-26-10.png

 

或是複製貼上以下的指令碼：

 

function isFieldEmpty(fieldname)
{
    var field = getField(fieldname);
    
    if ( field.type == "combobox" )
    {
        if (field.currentValueIndices == 0)
        {
            return true;
        }
    }
    else if ( field.type == "text" )
    {
        if (field.value.length == 0)
        {
            return true;
        }
    }
    return false;
}

 

 此指令碼會依據您想要驗證的欄位類型而有不同。上面的指令碼只驗證文字欄位及下拉式方塊。

 

4. 按一下確定並關閉‧

5. 在此「驗證並列印」按鈕的按鈕內容對話框中選擇「動作」標籤，並且從「選擇觸發器」下拉式選單中選擇可以觸發指令的動作，然後從「選擇動作」下拉式選單中選擇「執行JavaScript」。最後按一下「新增…」

6. 在「JavaScript編輯器」對話框中輸入或複製貼上以下指令並按一下確定。請注意您必須一一列出所有您希望被驗證的欄位，並將欄位名稱填寫於「if (isFieldEmpty(「…」))」。錯誤訊息文字也可自訂，只要加在每一個欄位的「app.alert("…")」就好了。

 

 2018-02-08_17-28-23.png

 

if (isFieldEmpty("文字2"))
{
    app.alert("請填寫公司名稱!");
}
else if (isFieldEmpty("下拉式方塊1"))
{
    app.alert("請選擇金額!");
}

else
{
    print();
}

 

最後提醒大家，在驗證表單的同時，別忘了清楚好懂的表單設計才是最重要的。

相關文章

評論

0 條評論

請登入寫評論。