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

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 包括客户端验证

时间： 2024-10-14 15:29:22

javascript 原生态实现ajaxform 包括客户端验证的相关文章

ASP.NET MVC如何实现自定义验证（服务端验证+客户端验证）

ASP.NET MVC通过Model验证帮助我们很容易的实现对数据的验证,在默认的情况下,基于ValidationAttribute的声明是验证被使用,我们只需 要将相应的ValidationAttribute应用到Model的类型或者属性上即可.对于自定义验证,我们也只需要定义相应的Validation 就可以了,不过服务端验证比较简单,而客户端验证就要稍微复杂一些,本文提供一个简单的实例说明在ASP.NET MVC中实现自定义验证的基本步骤.[源代码从这里下载] 一.AgeRangeAttr

Javascript 验证上传图片大小[客户端验证]

需求分析: 在做上传图片的时候,如果不限制上传图片大小,后果非常的严重.那么我们怎样才可以解决一个棘手的问题呢?有两种方式: 1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上,然后获得该图片大小做处理. 2)前台处理: 也就是利用Javascript获取该图片大小. 显然第一种方式,很不好.因为需要把文件先上传到服务器上,如果文件很大的话,在加上网不是很快,需要等待好长时间,治标不治本. 功能解析: 在这里我只介绍IE与FireFox两个浏览器的不同做法. IE6: 关键

客户端验证的极品--jQuery.validator

最近在做一个用户注册登录的页面,资料查寻过程中发现了一个非常不错的客户端验证的极品-jQuery.validate.它是著名的JavaScript包jQuery的一个插件,其实它还有其它的一些插件应该都爽,有待慢慢来学习 官方地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ jQuery用户手册:http://jquery.org.cn/visual/cn/index.xml 开发使用起来非常简单明了, 我的代码:

数往知来 ASP.NET MVC HtmlHelper、MVC快速增删改查 Cache MVC3客户端验证 MVC隐式异步提交 <二十八>

一.HtmlHelper.MVC快速增删改查 MVC 在MVC里面请求首先到控制器-->然后 -->数据库数据放在APP_DATE文件夹里, -->js.css文件放在content文件夹里 -->控制器放在Controllers里,控制器要以controller结尾 控制器下面的所有方法都称为action 2)webform跟 aspnet MVC:区别请求的地址不一样了 MVC请求的是控制器下面的action webform:aspx页面或者是一般处理程序 -->a标签

客户端验证换了，服务器验证持性

ASP.Net MVC Model(模型+验证) 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 模型就是处理业务,想要保存.创建.更新.删除的对象. 注解(通过特性实现) DisplayName Required StringLength(20,MinimumLength=2) DataType(System.ComponentModel.DataAnnotations.DataType.MultilineText) RegularExpression(@"^\w+([-+.]\w

用XMLHTTPRequest对象进行客户端验证

表单验证是WEB开发中经常遇到的问题,我们以前常见的做法是:在客户端对表单域进行内容的检查,看是否是满足一定的要求或满足一定的结构,比如:是内容否为空或是否按规定的格式填写了内容等.其实,我们还可以进行更进一步的验证,比如对数据进行实时验证,下面,我们就利用微软提供的XMLHTTPRequest组件来进一步提高表单的验证能力. 在WIN32平台上进行HTTP编程的方式很多,VB和C++程序员可以使用WinInet库,VB6程序员也可以用VB6自带的Internet控件.然而,对ASP程序员来是说

SpringMVC中文件上传的客户端验证

SpringMVC中文件上传的客户端验证 客户端验证主要思想:在jsp页面中利用javascript进行对文件的判断,完成验证后允许上传 验证步骤:1.文件名称 2.获取文件的后缀名称 3.判断哪些文件类型允许上传 4.判断文件大小 5.满足条件后跳转后台实现上传 前台界面(验证上传文件是否格式满足要求): <body> <h2>文件上传</h2> <form action="upload01" method="post" 

javascript高级程序设计 第九章-- 客户端检测

javascript高级程序设计 第九章-- 客户端检测 客户端检测是javascript开发中最具争议的一个话题,由于浏览器间存在差别,通常需要根据不同浏览器的能力分别编写不同的代码.有下列常使用的客户端检测方法:能力检测:在编写代码之前先检测特定浏览器的能力.例如,脚本在调用某个函数之前,可能要先检测该函数是否存在.这种检测方法将开发人员从考虑具体的浏览器类型和版本中解放出来,让他们把注意力集中到相应的能力是否存在上.能力检测无法精确地检测特定的浏览器和版本.怪癖检测:怪癖实际上是浏览器中存

客户端验证

客户端验证的好处是不用向服务器提交代码就能显示出错误信息.反应更快,与用户交互更流畅. 然而,其致命的弱点就是验证脚本可以在客户端被随意修改.因此它是不可靠的. 所以我们这里介绍怎样给单纯的服务器端验证加上客户端验证. 首先,确认解决方案根目录下的web.config文件中激活了客户端验证: 1 <configuration> 2 <appSettings> 3 <add key="ClientValidationEnabled" value="