Java工作流引擎表單引擎之JS表單字段輸入腳本驗證

關鍵字: 表單設計器, 字段驗證. workflow,ccform, ccBPM. 工作流快速開發平臺  工作流流設計  業務流程管理   asp.net 開源工作流
bpm工作流系統  java工作流主流框架  自定義工作流引擎

說明:對控件的用戶輸入採取輸入控制,與輸入後的校驗。比如校驗是否是e-mail, 是否是手機號,身份證號等等。

一、設置步驟

操作路徑:字段屬性, 擴展設置,腳本驗證。

字段列表:

驗證郵政編碼設置:

up-5c79bf480db0ca2d44c29f734a2f140724d.png

函數庫分爲:系統函數庫,與我自己定義的函數庫。

系統函數庫是ccBPM系統自帶的函數庫,它包括一些基本的,通用類型的驗證,比如:電話、郵件、郵政編碼。

如果驗證需要特殊的驗證,那就需要自定義函數庫了,如何定義個性化的函數請參考下一章節。

點保存按鈕就可以了,系統將會自動返回字段列表。

這樣的一個腳本驗證就完成了,把它非常方便了爲用戶的輸入完成了驗證設置。

二、如何設置自定義驗證函數?

按照如下步驟設置:

第1:建立一個js腳本文件。

第2:根據此腳本文件的事件,D:\ccflow\trunk\DataUser\JSLib對應的文件目錄裏。
比如:onblur事件函數放在onblur目錄裏,onkeypress事件函數放在onkeypress目錄裏。

函數名必須爲小寫,事例如下:

function isMobil(ctrl) {

    var patrn = /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;

    if (!patrn.exec(ctrl.value))

    {

       alert('非法的手機號碼.');

       return false;

    }

    return true

}

3.腳本驗證的工作原理

系統函數的目錄爲:

D:\ccflow\trunk\Data\JSLib

用戶自定義的函數目錄爲:

D:\ccflow\trunk\DataUser\JSLib

表單設計器自動產生的腳本文件位與

D:\ccflow\trunk\DataUser\JSLibData

在你執行保存時,表單設計器就把所有的函數調取出來,生成一個腳本驗證文件,此文件命名的格式爲。表單編號+”.js”。並存放在:D:\ccflow\trunk\DataUser\JSLibData 目錄下面。

表單載入時,就把此腳本文件自動的調入到界面上。

三、如何通過獲取表單控件值(使用ccform內置函數)?

我們知道在ccform表單設計器中有4種控件分別是dropdownlistbox, textbox,checkbox,ridionbutton.

up-fea890536532749fc720772a41b875ddc52.png

系統內置了三個函數,分別是獲取相應對象的值,請參考以上圖片。

ReqTB 獲取TextBox類型字段的輸入值。

ReqDDL 獲取DropDownListbox的選擇值。

ReqCB 獲取CheckBox的值。

四、如何在提交前做一個完整的表單輸入驗證?

關鍵字: ccform 字段驗證工作流程引擎提交前輸入完整性驗證

設置步驟:

建立一個自定義的js文件,放在D:\ccflow\trunk\DataUser\JSLibData\下面。

命名格式爲表單ID+”_Self.js”。比如:ND1701_Self.js

在自定義js文件(ND1701_Self.js)中創建一個一個校驗函數。
up-9fafab07cfbe7168ca36f1ca46cd0d35332.png

3, 打開該節點屬性=》找到功能按鈕標籤與狀態=》發送按鈕標籤=》按鈕js函數文本框中填寫:   return IsSubmit();

up-aae13164135da0b28554fe827012a73b933.png

五、 擴展閱讀1 -用一個控件操作控制其它控件屬性

如何使用ccform 用一個控件操作控制其它控件屬性。

對一個控件的操作讓其控制其他的控件屬性的變化,這樣的場景比較多。比如:一個checkbox是填寫更多資料,當用戶選擇這個checkbox時,其他的數據控件是可以填寫的否則是不可以填寫的。

如何在ccform中實現它?請按照如下步驟設置:

1, 創建一個表單比如:

up-ac449e1730eb4e7ee63fdf0cd97ce51c255.png

 

 

 

 

 

 

 

2,創建該表單的JS文件。

up-8d389f090bd62d2f32412afbe6902041cea.png

3,處理設置.

在該字段上點擴展屬性,然後找到【正則表達式/事件】

up-b35633fca2a6ac07581bb8d80a87f141c49.png

4, 設置到屬性裏

up-ee2da83ee22847fd99343ce1d530ca87fd4.png

5, 預覽並調試效果。

選擇前:

up-ffc84dc0248d11856a9703d5220cd7c9081.png

選擇後:

up-aa6061e9b3181d3d8309310240845bfd0ce.png

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章