JS實現對元件輸入值的即時校驗

1.1 應用場景

希望在填報元件中輸入值後，即時地進行校驗，如果有問題則彈出提示並清空輸入值。

如圖所示範例為，輸入字串必須符合正則運算式設定的格式，若不滿足格式則彈出警告提醒，如下圖所示。

在具體應用的時候，可以根據需求自己制定相應的校驗規則。

1.2 實現思路

在元件的編輯結束事件中，使用 JS 的 test 方法判斷元件的值與正則運算式是否匹配。如果不匹配清空輸入值。

2.1 範本設計

在 A1 儲存格輸入發文字號，並在 B1 儲存格中新增正文元件，如下所示：

2.2 新增編輯結束事件

選中 B1 儲存格的正文元件，為元件新增編輯結束事件，如下圖所示：

JavaScript 程式碼如下：

var ch = this.getValue();
//獲取當前元件值
var patrn = /[\u4e00-\u9fa5]\(\d{4}\)[1-9]\d*號$/;
//使用正則運算式定義規則：要求是標準的發文字號，由發文機關代字、發文年份和檔案順序號三個部分組成
if (!patrn.test(ch)) {
	FR.Msg.alert("提示", "文號格式錯誤,正確文號如:國土資函(2010)88號");
	//如果不滿足規則彈出提示
	this.setValue("");
	//清空輸入值
}

2.3 效果預覽

儲存並點選填報預覽，如果正文框中輸入內容不符合規則，就會彈出警告：

注：不支援行動端。

點選下載範本：JS實現對元件輸入值的即時校驗.cpt