用jQuery.formError取代alert( )

jQuery.formError是個很簡單、很容易整合的jQuery外掛，如果原有程式有一堆表單檢核的alert( )，可以使用jQuery.formError幾乎無痛轉換的改寫成較佳的使用者介面。

首先使用其 js 檔。

<script src="js/jquery.formError.js"></script>

再把alert() 換成 $("#ID").formError():

▼ 修改前

if ($("#USERID").val() == "") {
  alert("請輸入用戶帳號。");
  $("#USERID").focus();
  return false;
}

▼ 修改後

if ($("#USERID").val() == "") {
  $("#USERID").formError("請輸入用戶帳號。");
  $("#USERID").focus();
  return false;
}

執行範例如下：

要移除警示訊息框的方式如下：

$("#USERID").blur(function() {
  if (this.value != "") {
    $(this).formError({ remove: true });
  }
});

＃＃

您可能也會有興趣的類似文章

• [jQuery元件] Fancybox 3使用備忘 (0則留言, 2018/08/26)
• [jQuery] 動態建立元素的事件觸發 (0則留言, 2015/10/25)
• jQuery DataTables範例1：啟始設定 (0則留言, 2011/10/20)
• FixedHeader.js：將網頁表格標題列固定住的程式 (0則留言, 2011/09/29)
• 在Xuite測試 jQuery (0則留言, 2007/09/12)
• 替部落格的側邊欄位加上縮起與展開功能 (2則留言, 2007/03/18)
• 使用jQuery的效益 (0則留言, 2007/09/23)
• 第4個jqGrid範例: 資料列處理 (15則留言, 2010/02/14)
• jQuery在Xuite的測試 (0則留言, 2007/10/01)
• 第一個jqGrid範例：Local array (1則留言, 2010/02/13)
• 第3個jqGrid範例: XML與XML STRING格式 (2則留言, 2010/02/14)
• jQuery選擇器測試與範例 (0則留言, 2007/09/29)
• jQuery神奇的選擇器(Selector) (3則留言, 2007/09/28)
• 在Xuite裡使用jQuery的重點 (0則留言, 2007/09/22)
• 第2個jqGrid範例：增加額外選項設定 (6則留言, 2010/02/13)