## 主題特性
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'
}
});
~~~
~~~css
/* 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)參數
