微風夕語

[Semantic UI] 自訂的 Form Validation

2013-11-22 09:41 墳墓 (Brian Hsu)

因為覺得 SemanticUI 的一些設計理念滿有趣的，所以最近在搞的新玩具中的 CSS Framework 我放棄了 Bootstrap，改成用 SemanticUI 這套來做。

在 SemanticUI 當中內建了表單的驗證功能，可以在使用者送出表單前先以 JavaScript 來驗證一些基本的條件，一方面既可以減輕 Server 端的負擔，另一方面也可以讓使用者有比較好的體驗，畢竟可以不用和 Server 溝通，反應速度上會比較快。

SemanticUI 的表單驗證功能用起來很簡單，程式碼看起來也很直覺，並且也內建了許多的驗證邏輯，在使用的時候只要寫像下面這樣的 JavaScript 宣告就可以了：

var validations = {
  "title": {
    "identifier": "title",
    "rules": [{
      "type": "empty",
      "prompt": "請輸入標題"
    }]
  }
}

$('#form').form(validations)

不過有一個小問題是他內建的驗講邏輯不一定符合我們的需求，例如他的 empty 驗證邏輯，就真的只是檢查 title 這個欄位是不是空字串，如果使用者輸入的是連續的空白，表單驗證一樣會過。

但很多時候，我們會希望把連續的空白也視為空字串，這個時候 empty 這個驗證邏輯就不是很合用，還好翻了一下程式碼後，發現要把自訂的驗證邏輯喂給 SemanticUI 其實很簡單，只要把自己的 validation function 掛到 $.fn.form.settings.rules 這個物件下面就可以了。

所以我們的新表單驗證的 JavaScript 會變成：

$.fn.form.settings.rules["reallyNotEmpty"] = function(value) {
  return (value != undefined && $.trim(value) != "")
}

var validations = {
  "title": {
    "identifier": "title",
    "rules": [{
      "type": "reallyNotEmpty",
      "prompt": "請輸標題"
    }]
  }
}

$('#form').form(validations)