namespace javascript ajaxform 功能以及客戶端js自動驗證

時間 2019-11-20

標籤 namespace javascript ajaxform 功能以及客戶端自動驗證欄目 JavaScript 简体版

原文原文鏈接

Ns.UI.AjaxForm = function () {
    Ns.UI.Control.apply(this, arguments);
    this.onError = null;
    this.onSuccess = null;
    this.onBeforSend = null;
    this.onComplete = null;
    this.successFn = "";
    this.validateFn = "";
    this._ajax = null;
    this.data = {};
    this.async = true;
    this.submitBtn = "";
    this.resetBtn = "";
    this.encrypt = "default";
    this.validateFailt = "";
    this._init = function () { if (Ns.UI.Control.prototype._init) { Ns.UI.Control.prototype._init.apply(this, null); } var that = this; this._ajax = new Ns.Data.BaseAjax(); "Error,BeforSend,Complete,Success".split(",").each(function (i, name) { var e = "on" + this; that[e] = new Ns.Event.EventTarget(); that[e].currentTarget = that; that._ajax[e] = that[e]; that[e].eventName = this; }); }
    this.validate = function () {
        var retbol = false, isMuliteErr = this.isMultiErr;
        this.select("[ns-validate]").found.each(function () {
            var type = this.type;node

var val = Ns.DOM.Operater.val(this),ajax

vali = Ns.DOM.Operater.attr(this, "ns-validate")//獲取保存在標籤內的驗證規則正則表達式

, valiJson = Ns.Data.Json.NoJson(vali), evtarget, vfn, state = 0, that = this, validateFailt = false;
            if (!valiJson) { return; } vfn = NsHelper.judge.strEmpty(valiJson.validateFn) ? null : Ns.UI.AjaxForm.ValidateFns[valiJson.validateFn];
            // " rules:{ regexp:/y/i,message:'message',rule:true/false },target:'',errorcls:,notnul,nultext" 規則基本格式
            evtarget = Ns.DOM.find(valiJson.target)[0];
            Ns.DOM.Operater.removeClass(this, valiJson.errorcls);
            if (valiJson.notnul == true && !val) {json

Ns.DOM.Operater.addClass(this, valiJson.errorcls); 數組

!isMuliteErr && retbol ? "" : Ns.DOM.Operater.text(evtarget, valiJson.nultext); app

//此處爲何添加前面判斷，是爲了ajaxform的顯示錯誤提示信息是否爲同一表籤內，async

//isMultiErr表示 true爲每一個input控件都含有本身的對應錯誤提示框，false表示爲只有一個提示標籤函數

retbol |= true; NsHelper.judge.fnRun(vfn, { validate: valiJson, state: -1, validateFailt: true, currentDOM: this }); return; }
            NsHelper.judge.each(valiJson.rules, function (i, args) {
                if (!(this.regexp && this.regexp.test)) { state = 0; return; }
                var test = this.regexp.test(val);
                if (test && (this.rule == true || NsHelper.judge.unNl(this.rule))) { this

!isMuliteErr && retbol ? "" : Ns.DOM.Operater.text(evtarget, this.message); 編碼

Ns.DOM.Operater.addClass(that, valiJson.errorcls); retbol |= true; state = -1; validateFailt = true; return true;

}
if (!test && this.rule == false) {

!isMuliteErr && retbol ? "" : Ns.DOM.Operater.text(evtarget, this.message);

Ns.DOM.Operater.addClass(that, valiJson.errorcls); retbol |= true; validateFailt = true; return true; }

});
NsHelper.judge.fnRun(vfn, { validate: valiJson, state: -1, validateFailt: validateFailt, currentDOM: this });

//若是vfn爲函數，則運行，並將後一個參數做爲參數傳遞給vfn

        });
        if (this.validateFailt) { NsHelper.judge.fnRun(Ns.UI.AjaxForm.ValidateFns[this.validateFailt], retbol); }
        return retbol;
    }
    this.submit = function () { if (this.currentDOM.submit) { this.currentDOM.submit(); } }
    this.reset = function () { if (this.currentDOM.reset) { this.currentDOM.reset(); } }
    this.isMultiErr = false;
    this.init = function () {
        this._ajax.url = this.currentDOM.action; this._ajax.dataType = "json"; this._ajax.async = this.async; this._ajax.type = this.currentDOM.method;
        if (Ns.UI.AjaxForm.SuccessFns[this.successFn]) { this._ajax.onSuccess.addEvent(Ns.UI.AjaxForm.SuccessFns[this.successFn]); }
        var that = this;
        if (this._ajax.async) { this.currentDOM.submit = function (e) { if (that.validate() == true) { return; } that.serialize(); if (NsHelper.judge.fnRun(Ns.UI.AjaxForm.ValidateFns[that.validateFn]) !== true) { that.send(); } } }
        if (this.submitBtn) { var td = Ns.DOM.find(this.submitBtn)[0]; if (td) { Ns.Event.EventHelper.bind(td, "click", function () { that.submit(); }); } }
        if (this.resetBtn) { var td = Ns.DOM.find(this.resetBtn)[0]; if (td) { Ns.Event.EventHelper.bind(td, "click", function () { that.reset(); }); } }
    }
//序列form傳輸數據
    this.serialize = function () {
        var that = this, den;
        if (this.encrypt.toLowerCase() === "default") { den = Ns.Data.Base64.encodeURI; }//加密編碼規則函數
        else {

this.encrypt.replace("-", ".");//加密規則函數調用全部方法路徑 Ns-Data-Encrypt-encrypt 這裏是-是分割，，，主要避免.點的選擇符的衝突

         den = NsHelper.gotoNs(this.encrypt); }
        this.select("*").found.each(function () {
            var type = this.type;
            if (this.name && type && !Ns.DOM.Operater.property(this, "disabled")[0] && /^(?:input|select|textarea|keygen)/i.test(this.nodeName) && ! /^(?:submit|button|image|reset|file)$/i.test(type) && (this.checked || !/^(?:checkbox|radio)$/i.test(type))) {
                var val = Ns.DOM.Operater.val(this), encrypt; encrypt = Ns.DOM.Operater.attr(this, "ns-encrypt");
                if (!val) { val = ""; } if (encrypt == true) { val = den(val); } that.data[this.name] = val;
            }
        });

this._ajax.data = that.data; return that.data;
    }
    this.send = function () { this._ajax.send(); }
    NsHelper.CONSTRUCT.apply(this, arguments);
}
Ns.Extend.pro(Ns.UI.AjaxForm, Ns.UI.Control);
Ns.UI.AjaxForm.DisposeForm = function (ajaxform) { if (ajaxform.successFn) { delete Ns.UI.AjaxForm.SuccessFns[ajaxform.successFn]; } if (ajaxform.validateFn) { delete Ns.UI.AjaxForm.ValidateFns[ajaxform.validateFn]; } }
Ns.UI.AjaxForm.SuccessFns = {};
Ns.UI.AjaxForm.ValidateFns = {};
Ns.UI.AjaxForm.AutoAjax = function (exp, config) {

config = config ? config : {};

/*new init send */

var ajaxForm = new Ns.UI.AjaxForm();

ajaxForm.find(exp);

ajaxForm.AttrToProp();//將ns-data的屬性值賦值給自身對象來自父類 Ns.UI.Control

if (config.success) {

var code = "successFn_" + new Date().valueOf();

ajaxForm.successFn = code; Ns.UI.AjaxForm.SuccessFns[code] = config.success;

}

if (config.validiate) { var code = "validate_" + new Date().valueOf();

ajaxForm.validateFn = code; Ns.UI.AjaxForm.ValidateFns[code] = config.validate; }

if (config.encrypt) { ajaxForm.encrypt = config.encrypt; } ajaxForm.init(); return ajaxForm;

}

AjaxForm 的實現依靠namespace.js的庫，，，主要的功能包含了序列form提交的數據，驗證，發送。

AjaxForm 採用的了混合繼承的方式來完成繼承功能AutoAjax 運行過程爲主要實例化ajaxform對象，再找到form對象進init的初始化其中init初始化是根據ns-data屬性值進行初始化，將ns-data轉化爲json，而後賦值給ajaxform變量，而後依次綁定相應的事件行爲例如：

ns-data = "successFn:'ajaxFormSuccess/*函數名存儲在Ns.UI.AjaxForm.SuccessFns空間內*/'

,submitBtn:'.login_btn/*提交按鈕選擇表達式*/'

,validateFn:'ajaxFormValidate/*自定義驗證函數名存儲在Ns.UI.AjaxForm.ValidateFns空間內*/'

,validateFailt:'validate/*自動化驗證（ajaxForm內驗證失敗的時的函數名存儲在Ns.UI.AjaxForm.ValidateFns空間內）*/'

,isMultiErr:false"而自動化驗證表達式則在標籤內添加

驗證規則則保存在標籤內，以ns-validate屬性保存

ns-validate屬性

ns_validate = "rules:[]/*正則規則*/

,target:'.error_text/*錯誤信息顯示在哪*/'

,errorcls:'error_ipt/*驗證未經過，標籤添加的類*/'

,notnul:true/*是否容許爲null*/

,nultext:'登錄用戶名不能爲空'/*未null時提醒錯誤信息*/" }