jQuery formValidator 插件用法詳解：表單驗證快速上手

代碼解讀

$("#txtDeviceName").formValidator({
    tipid: "tiptxtDeviceName",      // 提示訊息顯示容器 ID
    onshow: "請輸入測點名稱",      // 聚焦前顯示
    onfocus: "名稱不超過10個漢字"  // 聚焦時顯示
}).InputValidator({
    min: 8, max: 20,                // 長度範圍（字元數）
    onerror: "名稱4-10位漢字,請確認" // 驗證失敗提示
});

功能說明

• formValidator：初始化驗證器，綁定提示區域與各狀態文字。
• InputValidator：增加**長度驗證規則**（支援中英文混合，按字元計）。
• 表單提交前呼叫 $.formValidator.pageIsValid() 或 $("#formId").trigger("validate") 觸發全域檢查。

完整範例

<input id="txtDeviceName" type="text" />
<span id="tiptxtDeviceName"></span>
<button onclick="submitForm()">提交</button>

<script>
$("#txtDeviceName").formValidator({...}).InputValidator({...});
function submitForm() {
    if ($.formValidator.pageIsValid()) {
        // 通過驗證，AJAX 提交
    }
}
</script>

資源

官方文件：jQuery formValidator 使用教程