javascript 原生态实现ajaxform 包括客户端验证

时间：2014-07-18 19:20:58 阅读：372 评论：0 收藏：0 [点我收藏+]

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 = ""; //new 的时候进行调用的方法 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]; //客户端验证数据格式 json数据会自动转换为json // " 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); 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 }); }); 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; // 系统初始化方法主要初始化ajax ，以及覆盖submit方法 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(); }); } } } //序列数据转换为json数据组主要引用jq内的规则 this.serialize = function () { var that = this, den; if (this.encrypt.toLowerCase() === "default") { den = Ns.Data.Base64.encodeURI; } else { this.encrypt.replace("-", "."); 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;/*加密编码使用规则，加密的调用的库赋值是在ajaxform内赋值，而此为该值是否需要加密编码*/ 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);//此处调用 _init方法进行内部初始化 } Ns.Extend.pro(Ns.UI.AjaxForm, Ns.UI.Control);//继承 //释放ajaxform类 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 = {};//存储 ajax方法传输成功时的方法，为自动化做的一个存储方法库 Ns.UI.AjaxForm.ValidateFns = {};//重新验证为自动化做的一个存储方法库 //exp 为form的选择表达式 Ns.UI.AjaxForm.AutoAjax = function (exp, config) { config = config ? config : {};/*new init send */var ajaxForm = new Ns.UI.AjaxForm(); ajaxForm.find(exp); ajaxForm.AttrToProp(); 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 = "rules:[]/*正则规则*/,target:‘.error_text/*错误信息显示在哪*/‘,errorcls:‘error_ipt/*验证未通过，标签添加的类*/‘,notnul:true/*是否允许为null*/,nultext:‘登陆用户名不能为空‘/*未null时提醒错误信息*/" } rules=[] ===> regexp: 正则表达式 ,message：提醒消息 rule:true/false 正则表达式匹配的结果为true还是false时是未通过 rules 是个数组，但是依次按照原有的顺序进行正则验证

javascript 原生态实现ajaxform 包括客户端验证,布布扣,bubuko.com

标签：java 使用 os 数据 io for

原文地址：http://www.cnblogs.com/Sekeys/p/3850758.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行