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