1. [如何点击某个submit按钮的时候不要验证表单？](https://github.com/niceue/nice-validator/issues/61)
绑定了 `formnovalidate` 属性的按钮点击后将直接提交表单而不执行验证：
~~~
<form action="xxx.php" method="post">
<fieldset>
<input name="aaa" data-rule="required">
<input name="bbb" data-rule="required;someRule">
</fieldset>
<button type="submit">提交</button>
<button type="submit" formnovalidate>提交不验证</button>
</form>
~~~
2. [如何自定义远程验证（remote）返回的结果格式？](https://github.com/niceue/nice-validator/issues/81)
> 自定义远程验证（remote）返回的结果格式
~~~
$('#form').validator({
dataFilter: function(data) {
// 返回 niceValidator 支持的格式
return data;
},
fields: {
'username': '用户名: required; username; remote[check/username.php]'
}
});
~~~
**或者在字段中传递`dataFilter`，优先级更高**
~~~
$('#form').validator({
fields: {
'username': {
rule: '用户名: required; username; remote[check/username.php]',
dataFilter: function(data) {
// 返回 niceValidator 支持的格式
return data;
}
}
}
});
~~~
假设后端返回的数据为：
~~~
{"type":"error", "msg": "用户名已存在!"}
~~~
如果后端不能更改返回数据格式，那么你需要在前端转换一下：
~~~
$('#form').validator({
dataFilter: function(data) {
var d = {};
data = $.parseJSON(data);
d[ data.type ] = data.msg;
return d;
},
fields: {
'username': '用户名: required; username; remote[check/username.php]'
}
});
~~~
3. [如何实现某个字段满足了特定规则后才必填？](https://github.com/niceue/validator/issues/63)
> 规则required支持传入规则名，满足规则才验证
~~~
$("#form").validator({
rules: {
myCondition: function(element) {
return $("#other").is(":checked");
}
},
fields: {
// 只有满足myCondition规则，才验证该字段不能为空
name: "required(myCondition)"
}
});
~~~
4. [如何防止表单重复提交？](https://github.com/niceue/validator/issues/36)
> 添加.holdSubmit()方法，用来防止表单重复提交
~~~
$("#myForm").validator({
valid: function(form){
var me = this;
// 提交表单之前，hold住表单，防止重复提交
me.holdSubmit();
$.ajax({
url: "xxx.php",
data: $(form).serialize(),
type: "POST",
success: function(){
// 提交表单成功后，释放hold
me.holdSubmit(false);
}
});
}
});
~~~
5. [如何自动获取display？](https://github.com/niceue/validator/issues/121)
> 支持自动获取display
通过function回调的方式
~~~
$('form').validator({
display: function(element) {
return $(element).parent().prev().text();
},
fields: {
'user': {
rule: 'required; username',
display: function(element) {
return $(element).parent().prev().text();
}
}
}
});
~~~
6. [如何校验KindEditor？](https://github.com/niceue/validator/issues/74)
**只要是表单控件，niceValidator都可以验证。** 众多的编辑器都是基于textarea控件的。对于KindEditor它通过iframe创建了一个隔离的可视化编辑环境，但是它编辑的内容不会实时同步，也就是说你内容编辑完了，textarea的值却还是空的。但是，当你提交表单的时候，KindEditor会同步内容。 可以看下KindEditor的官方说明：[我取不到编辑器数据，直接取得textarea的value也没用](http://www.kindsoft.net/docs/qna.html#id5)
所以在验证初始化中调用beforeSubmit，并同步一下编辑器的内容，就可以验证了，代码如下：
~~~
$("#form").validator({
beforeSubmit: function(){
editor.sync();
}
});
~~~
7. [如何自定义主题？](https://github.com/niceue/validator/issues/12)
所谓主题，是通过配置表单的class、消息模板以及其他一些参数实现的不同展现效果。 有了主题，可以帮助简化很多UI方面的配置，也可以作为一些特殊的配置存在。 关于参数的更多了解，参见[参数配置](https://github.com/niceue/validator/issues/13)
##### nice Validator 的主题具有以下特点：
1. **简单**，js配置，stylus生成样式，少量代码便可以配置出新的主题
2. **独立**，不同表单可以应用不同主题
3. **自由**，除了用于配置主题的msg开头的参数，其他大部分参数也都可以配置到主题中
4. **灵活**，主题配置本质上是在传参，优先级高于全局配置，但是又会被调用时的传参覆盖
### 准备工作
1. 你需要安装[Node.js](http://nodejs.org/)环境，并且在validator目录执行`npm install`命令安装依赖
2. 你需要知道[Stylus](http://learnboost.github.io/stylus/)的语法，很简单的，一旦你学会Stylus，你以后写样式的时候肯定会离不开它！
你说你不想花时间来学习Stylus？ 那好吧，硬写css也是能搞定的，你可以省略这一步直接说：我已经准备好了！Ready? Go!
### 编写主题
所有主题配置文件放置在`src/themes`目录，然后通过`src/jquery.validator.styl`文件导入，编译该文件就得到根目录下的`jquery.validator.css`文件。 该文件默认代码如下：
~~~
@import "themes/base";
/*********************
* Themes
*********************/
@import "themes/default";
@import "themes/simple";
@import "themes/yellow";
~~~
`themes/simple`的styl文件代码如下：
~~~
/* theme: simple */
.n-simple {
.msg-wrap {
.n-icon {
background-image: url(images/validator_simple.png);
}
}
.n-left, .n-right {
margin-top: 5px;
}
.n-bottom .msg-wrap {
margin-top: 3px;
}
.n-tip {
.n-icon {display:none;}
}
}
~~~
别小看这一点css代码哦！它可是包含了上下左右四个方向的消息，原理就是`.n-position`中的position是哪个方向，消息就会自动显示在输入框的周围哪个位置。
~~~
`.n-right`会使消息显示在输入框右边；
`.n-bottom`会使消息显示在输入框下边；
`.n-top`会使消息显示在输入框上边；
`.n-left`会使消息显示在输入框左边；
~~~
怎么样是不是很简单？ 再来看下js配置文件中的代码吧：
~~~
$.validator.setTheme({
'simple_right': {
formClass: 'n-simple',
msgClass: 'n-right'
},
'simple_bottom': {
formClass: 'n-simple',
msgClass: 'n-bottom'
}
});
~~~
其中的`formClass`是用于控制该主题css的命名空间，会自动添加到初始化后的表单上面。`msgClass`是控制每条消息方向的类。也就是说这个参数四选一，不用你起名字了。 当你写完上面那段样式后，就可以配置出同一款主题的4个方向的样式了。上面js配置中simple\_right和simple\_bottom是用于调用的时候传递的主题名字。
最后，附上自动生成的msg-box的DOM结构，你在写样式的时候也可以利用谷歌或者火狐的开发者工具查看，会更直观：
~~~
<span class="msg-box n-right" style="" data-for="user[name]">
<span class="msg-wrap n-error" role="alert">
<span class="n-icon"></span>
<span class="n-msg">不能为空</span>
</span>
</span>
~~~
8. [如何自定义消息的DOM结构？](https://github.com/niceue/validator/issues/44)
> 消息的结构，消息的样式，消息的显示方式。
0.5.0版本作了以下优化：
1. 去掉了msgTemplate这个用处不大的参数
2. 增加参数msgWrapper，用于设置消息容器的标签
3. 增加参数msgMaker，用于完全自定义消息的结构
看下面的例子：
~~~
$('#demo').validator({
fields: {
'user[name]': 'required;username'
,'user[pwd]': 'required;password'
},
msgWrapper: 'div',
msgMaker: function(opt){
return '<span class="'+ opt.type +'">' + opt.msg + '</span>';
}
});
~~~
最后自动生成的消息为：
~~~
<div class="msg-box n-right" for="user[name]">
<span class="n-error">不能为空</span>
</div>
~~~
msgMaker方法的参数`opt`包含以下选项:
* `type`：消息类型（可能的值为：error / ok / tip / loading）
* `cls`： 即msgClass参数的值
* `style`： 即msgStyle参数的值
* `icon`： 即msgIcon参数的值
* `arrow`： 即msgArrow参数的值
* `show`： 即msgShow参数的值
* `hide`： 即msgHide参数的值
