## 主題特性
1. **簡單**，js 配置 className，css 定義主題樣式
2. **獨立**，不同表單可以應用不同主題
3. **自由**，除了主題參數，其他參數也都可以配置到主題中
4. **靈活**，主題配置本質上是在傳參，優先級高于全局配置，但是又會被調用時的傳參覆蓋
## 配置主題
### (1). 調用 `$.validator.setTheme()` 接口
```javascript
$.validator.setTheme("themeName", {
formClass: "nice-flat",
msgClass: "n-right"
});
```
其中的 `formClass` 參數定義了 CSS 的名稱空間，表單初始化后自動添加到 form 上面。`msgClass` 參數定義了每條消息擁有的 CSS 類。雖然這兩個參數沒有要求，但是建議 `msgClass` 按照以下 4 個類名命名：
1. `n-top`：使消息顯示在輸入框上邊
2. `n-right`：使消息顯示在輸入框右邊
3. `n-bottom`：使消息顯示在輸入框下邊
4. `n-left`：使消息顯示在輸入框左邊
nice-validator 對 `msgClass` 有一個方向的檢測機制，包含 `top|right|bottom|left` 的名稱可以控制消息插入的位置。
### (2). 配置更多參數
> 1. 每個主題可以配置所有參數，互不干擾
> 2. 配置優先級：`data-validator-option` > `options` > `theme options` > `global options`
## 編寫主題樣式
主題 CSS 樣式可以寫在 jquery.validator.css 文件中，也可以定義在你的其他樣式表中。
官方的主題樣式使用 [stylus](http://stylus-lang.com/) 工具開發，所有主題配置文件放置在 src/themes 目錄，然后通過src/jquery.validator.styl 文件導入，編譯該文件就得到 dist 目錄下的 jquery.validator.css 文件。
以下是 simple 系列主題代碼：
```javascript
// local/zh-Cn.js 中的配置
$.validator.setTheme({
'simple_right': {
formClass: 'n-simple',
msgClass: 'n-right'
},
'simple_bottom': {
formClass: 'n-simple',
msgClass: 'n-bottom'
}
});
/* src/themes/simple.styl */
.n-simple {
.msg-wrap {
position: absolute;
z-index: 1;
.n-icon {
background-image: url(images/validator_simple.png);
}
}
.n-top {
.msg-wrap {
bottom: 100%;
}
}
.n-bottom {
.msg-wrap {
top: 100%;
}
}
.n-left, .n-right {
margin-top: 5px;
}
.n-bottom .msg-wrap {
margin-top: 3px;
}
.n-tip {
.n-icon {display:none;}
}
}
```
## 自定義消息結構
參見 [msgMaker](https://validator.niceue.com/docs/options.html#section-2-9) 參數
