## 主题特性
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)参数
