最近的项目中要使用ajax,于是对各种ajaxframework在进行比较之后,最终选择了prototype.js,由于prototype.js是一个非常基础的ajaxframework,需要根据项目需求自己来进行一些扩展,下面就是我所做的一些扩展,如有误,请指正!
我实现了一个Form.Element.ValidationObserver,这个类需要依赖Validation.js以及相应的css(validation-advice),该类是对表单中的单个元素通过ajax结合后台进行验证,其中因为无法实现对Validation.js进行重用,所以copy了其中的一些代码,我实在想不到更好的办法,如果有哪位有更好的做法,不吝赐教!
/*
*对Form.Element进行扩展
*/
Object.extend(Form.Element,{
/*
*使指定的element不可用
*/
disable:function(element){
element=$(element);
element.disabled=’true’;
}, /*
*使指定的element可用
*/
enable:function(element){
element=$(element);
element.disabled=’’;
}, /*
*判断值是否为空
*/
empty:function(element){
returnthis.getValue(element).match(/^s*$/);
}, /*
*判断值是否不为空
*/
notEmpty:function(element){
return!this.empty(element);
}
});/*
*对Element进行扩展
*/
Object.extend(Element,{
/*
*以块状显示指定的element
*/
block:function(){
for(vari=0;i<arguments.length;i++){
varelement=$(arguments[i]);
element.style.display=’block’;
}
}
});/*
*验证观察者,用来实现对指定字段进行验证
*复写Abstract.EventObserver.initialize(),在回调函数中通过ajax发送消息进行后台验证
*/
Form.Element.ValidationObserver=Class.create();
Object.extend(Object.extend(Form.Element.ValidationObserver.prototype,Form.Element.EventObserver.prototype),{
/*
*对Form.Element.EventObserver.initialize进行的修改,将要注册的验证回调函数设置为创建ajax验证请求
*element为需要验证的元素
*url为ajax要发送请求的地址
*parameterCallback为取得验证参数的回调函数
*使用方法:
*newForm.Element.ValidationObserver("pol",
"http://localhost:8080/agreement/ValidatePol";,
function(){returnForm.Element.serialize("pol");});
*/
initialize:function(element,url,parameterCallback){
this.element =$(element);
this.callback=function(element,value){
newAjax.Validator(element,url,{parameters:parameterCallback()});
} this.lastValue=this.getValue();
this.registerCallback(this.element); }
})/*
*新增通过Ajax进行验证类
*借鉴Validation验证类
*/
Ajax.Validator=Class.create();
Object.extend(Object.extend(Ajax.Validator.prototype,Ajax.Request.prototype),{
initialize:function(validated,url,options){
this.element=$(validated); this.transport=Ajax.getTransport();
this.setOptions(options); varonComplete=this.options.onComplete||Prototype.emptyFunction;
this.options.onComplete=(function(transport,object){
this.updateContent();
onComplete(transport,object);
}).bind(this); this.request(url);
},
/*
*根据后台返回的结果,如果返回responseText为空则表示验证通过,不显示出错信息
*否则将返回responseText作为出错信息显示
*/
updateContent:function(){
varresponse=this.transport.responseText; if(!this.options.evalScripts)
response=response.stripScripts(); varid=’advice-’+this.element.id;
varprop=’__advice’;
if(Validation.isVisible(this.element)&&!response==""){
if(!this.element[prop]){
varadvice=document.createElement(’div’);
advice.appendChild(document.createTextNode(response));
advice.className=’validation-advice’;
advice.id=id;
advice.style.display=’none’;
this.element.parentNode.insertBefore(advice,this.element.nextSibling);
if(typeofEffect==’undefined’){
advice.style.display=’block’;
}else{
newEffect.Appear(advice.id,{duration:1});
}
}
this.element[prop]=true;
}else{
try{
$(id).remove();
}catch(e){}
this.element[prop]=’’;
}
}
})