基于avalon的驗證框架：validation

jopen 10年前發布 | 71K 次閱讀 前端技術 validation

基于avalon的驗證框架開發完畢，支持實時驗證，失去焦點驗證，提交驗證，手動驗證，異步驗證（基于ES6的Promise）。可以在配置對象上的validationHooks中添加驗證規則。

驗證規則如下定義:

</tr> </tbody> </table> </div>

alpha_numeric: { //這是名字，不能存在-，因為它是這樣使用的ms-duplex-int-alpha_numeric="prop"

</tr> </tbody> </table> </div>

    message: '必須為字母或數字', //這是錯誤提示，可以使用{{expr}}插值表達式，但這插值功能比較弱，

</tr> </tbody> </table> </div>

    //里面只能是某個單詞，兩邊不能有空格

</tr> </tbody> </table> </div>

    get: function(value, data, next) { //這里的傳參是固定的，next為回調

</tr> </tbody> </table> </div>

        next(/^[a-z0-9]+$/i.test(value)) //這里是規則

</tr> </tbody> </table> </div>

            //如果message有{{expr}}插值表達式，需要用data.data.expr = aaa設置參數，

</tr> </tbody> </table> </div>

            //aaa可以通過data.element.getAttribute()得到

</tr> </tbody> </table> </div>

        return value //原樣返回value

</tr> </tbody> </table> </div>

    }

</tr> </tbody> </table> </div> </div> </div>

在validationHooks中自定驗證規則，每個都必須寫 message( message不能為空字符串)與 get方法。

驗證規則不懼怕任何形式的異步，只要你決定進行驗證時，執行next方法就行。next 需要傳入布爾。

},
async: {
    message: "異步驗證",
    get: function(value, data, next) {
        setTimeout(function() {
            next(true)
        }, 3000)
        return value
    }
},

另一個例子:

beijing: {
    message: "當前位置必須是在{{city}}",
    get: function(value, data, next) {
        $.ajax({
            url: "http://ws.qunar.com/ips.jcp",
            dataType: "jsonp",
            jsonpCallback: "callback",
            success: function(data, textStatus, jqXHR) {
                data.data.city = "北京"
                next(data.city == value)
            }
        })
        return value
    }
}

注意，本組件是基于 avalon1.3.7開發，如果是很舊的版本，可以使用avalon.validation.old.js，它一直兼容到avalon1.2.0。

注意，本組件只能綁定在 form元素上, <form ms-widget="validation"></>

驗證框架提供了各式各樣的回調，滿足你最挑剔的需求：

onSuccess, onError, onComplete, onValidateAll, onReset, onResetAll

其中，前面四個是一個系列，它們都有1個參數，是一個對象數組，里面一些 驗證規則對象（如果成功，數組為空）； onReset是在元素獲取焦點做重置工作的，如清理類名， 清空value值，onResetAll是用于重置整個表單，它會在組件執行它轄下的所有元素的onReset回調后再執行。

驗證規則對象的結構如下：

{
    element: element, //添加了ms-duplex綁定的元素節點，它應該位于form[ms-widget="validation"]這個元素下
    data: {
        city: "北京"
    }，
    message: '當前位置必須是在{{city}}',
    validateRule: "beijing",
    getMessage: function() {} //用戶調用到方法即可以拿到完整的錯誤消息——“當前位置必須是在北京”
}

如果用戶指定了 norequired驗證規則，如果input為空, 那么就會跳過之后的所有驗證

使用說明
名字 類型 默認值 說明
配置參數
validationHooks Object {} 空對象，用于放置驗證規則
onSuccess Function avalon.noop 空函數，單個驗證成功時觸發，this指向被驗證元素this指向被驗證元素，傳參為一個對象數組
onError Function avalon.noop 空函數，單個驗證失敗時觸發，this與傳參情況同上
onComplete Function avalon.noop 空函數，單個驗證無論成功與否都觸發，this與傳參情況同上
onValidateAll Function avalon.noop 空函數，整體驗證后或調用了validateAll方法后觸發
onReset Function avalon.noop 空函數，表單元素獲取焦點時觸發，this指向被驗證元素，大家可以在這里清理className、value
onResetAll Function avalon.noop 空函數，當用戶調用了resetAll后觸發，
validateInBlur Boolean true true，在blur事件中進行驗證,觸發onSuccess, onError, onComplete回調
validateInKeyup Boolean true true，在keyup事件中進行驗證,觸發onSuccess, onError, onComplete回調
validateAllInSubmit Boolean true true，在submit事件中執行onValidateAll回調
resetInFocus Boolean true true，在focus事件中執行onReset回調
接口方法與固有屬性
$init() Function
為元素綁定submit事件，阻止默認行為
$destory() Function
銷毀組件，移除相關回調
validateAll(callback) Function
驗證當前表單下的所有非disabled元素
參數名/返回值 類型 說明
callback Null|Function 最后執行的回調，如果用戶沒傳就使用vm.onValidateAll
resetAll(callback) Function
重置當前表單元素
參數名/返回值 類型 說明
callback Null|Function 最后執行的回調，如果用戶沒傳就使用vm.onResetAll
validate(data,isValidateAll) Function
驗證單個元素對應的VM中的屬性是否符合格式
參數名/返回值 類型 說明
data Object 綁定對象
isValidateAll Undefined|Boolean 是否全部驗證,是就禁止onSuccess, onError, onComplete觸發
er

avalon.validation自帶了許多 驗證規則，滿足你一般的業務需求。

大家可以在onReset的回調里得到第二個參數data, 然后調用data.valueResetor()將VM中的數據也置空,如布爾數據變false, 數值數據變0,數組數據變[],字符串數組變成""

也可以在頁面添加不依賴于ms-duplex的綁定

validateVM.data.push({
    valueAccessor: function() {}
    validateParam: "xxx",
    element: element
})

項目主頁：http://www.baiduhome.net/lib/view/home/1416408452617

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！