namespace javascript ajaxform 功能以及客户端js自动验证

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;

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

 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) {

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

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

//此处为什么添加前面判断，是为了ajaxform的显示错误提示信息是否为同一表签内，

//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))) {

                            !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时提醒错误信息*/" }

 rules=[] ===>  regexp:  正则表达式 ,message：提醒消息   rule:true/false 

  正则表达式匹配的结果为true还是false时是未通过rules 是个数组，但是依次按照原有的顺序进行正则验证

转载于:https://www.cnblogs.com/Sekeys/p/3851074.html