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參數的值
