浏览 3384 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
最后更新时间：2007-08-23
validate.js（我已经改进了很多，这是新的）
var Validator = Class.create();
Object.extend(Validator.prototype,{
initialize : function(form,className,options){
this.form = $(form);
this.options = Object.extend({
onlyNum : 'num',
required : 'required',
url : 'url',
maxLength : 'maxLength'
},options || {});
this.className = className;
this.fireType = null;
this.checked();//动态添加的元素可以再次执行checked方法以加载验证
},
checked : function () {
this.form.getElements().each(function(obj,index){
if(this._isExistAttribute(obj,this.options.onlyNum)){
this._onlyNum(obj);
};
if(this._isExistAttribute(obj,this.options.required)){
obj.setStyle({
background : 'url(/images/required1.gif) no-repeat right top'
})
setInterval(function(){if(!obj.value.blank())
obj.style.background = 'url(/images/required.gif) no-repeat right top';
else
obj.style.background = 'url(/images/required1.gif) no-repeat right top';
}.bind(this),10)
};
if(obj[this.options.maxLength]){
Event.observe(obj,'keydown',function(){
if(obj.value.length>parseInt(obj[this.options.maxLength]))
event.returnValue = false;
}.bind(this,obj))
}
if(obj[this.options.url]){
Event.observe(obj,'change',function(){
new Ajax.Request(obj[this.options.url],{
parameters : {value : obj.value},
onComplete : function(transport){
if(transport.responseText == 'true'){
if(!$(obj.id+'Div'))
this._createMsgDiv(obj,obj.urlMsg);
obj.focus();
obj.value = '';
}else
if($(obj.id+'Div'))
this._destoryMsgDiv(obj.id+'Div');
}.bind(this)
})
}.bind(this,obj))
}
}.bind(this))
},
//sumbit validate
fireSubmit : function (){
if(!this.fireType) this.fireType = event.srcElement;
var _needArr = this.form.getElements()
.findAll(function(obj){return this._isExistAttribute(obj,this.options.required)&& obj.value.blank()}.bind(this));
if(event.srcElement == this.fireType && _needArr.length == 0) this.form.submit();
else
_needArr.each(function(o){
Event.observe(o,'blur',function(){
if(!o.value.blank()){
if($(o.id+'Div')) this._destoryMsgDiv(o.id+'Div');
o.setStyle({
background : 'url(/images/required.gif) no-repeat right top'
})
this.fireSubmit();
}else{
o.focus();
}
}.bind(this,o));
o.focus();
var msg = o.msg || 'the element can not empty';
this._createMsgDiv(o,msg);
throw $break;
}.bind(this));
},
//create show message div
_createMsgDiv : function(el,msg){
//IE6 select fix
if(!this.underlay){//ie select fix
this.underlay = document.body.appendChild(Builder.node('iframe',{id:'iframe'}));
Element.setStyle(this.underlay, {
position: 'absolute',
display: 'none',
border: 0,
margin: 0,
opacity: 0.01,
padding: 0,
background: 'none'
});
}
var _nDiv = document.body.appendChild(Builder.node('div',{id:el.id+'Div',className:this.className}));
_nDiv.innerText = msg.replace(/(^\s*)|(\s*$)/g, "");
_nDiv.style.height = el.offsetHeight;
switch (el.position){
case 'left' :
_nDiv.style.left = Position.cumulativeOffset(el)[0] - _nDiv.offsetWidth - 3 +'px';
_nDiv.style.top = Position.cumulativeOffset(el)[1] + 'px';
break;
case 'up' :
_nDiv.style.top = Position.cumulativeOffset(el)[1]- el.offsetHeight - 3+ 'px';
_nDiv.style.left = Position.cumulativeOffset(el)[0] + 'px';
break;
case 'down' :
_nDiv.style.top = Position.cumulativeOffset(el)[1]+ el.offsetHeight + 3+ 'px';
_nDiv.style.left = Position.cumulativeOffset(el)[0] + 'px';
break;
default :
_nDiv.style.top = Position.cumulativeOffset(el)[1] + 'px';
_nDiv.style.left = Position.cumulativeOffset(el)[0] + el.offsetWidth + 3 + 'px';
}
this.underlay.style.height = _nDiv.offsetHeight;
this.underlay.style.left = _nDiv.style.left;
this.underlay.style.top = _nDiv.style.top;
this.underlay.style.width = _nDiv.offsetWidth;
$('iframe').show();
_nDiv.style.display = 'none';
_nDiv.style.zIndex = '1200';
Effect.Appear(_nDiv);
},
//destory message div
_destoryMsgDiv : function (id){
if(!$(id)) return;
this.underlay.hide();
Effect.Fade(id,{afterFinish : function(){ document.body.removeChild($(id))}});
},
_isExistAttribute : function(el,attr){
return el.readAttribute(attr)!=null ? true : false;
},
//only input number
_onlyNum : function(obj){
Event.observe(obj,'keydown',function(e){
var e1 = event || e;
if(!((e1.keyCode>=48&&e1.keyCode<=57)||(e1.keyCode>=96&&e1.keyCode<=105)||(e1.keyCode==8)||(e1.keyCode==190)))
if(e1.keyCode==13)
e1.keyCode=9
else
e1.returnValue=false;
});
}
})
使用时的页面
<html>
<head>
<style type="text/css">
.msg {
position : absolute;
background:#85BBEF;
padding : 2px 5px 2px 5px;
font : 12px #FFFFFF 新宋体;
border : 1px solid black;
}
</style>
<script src='prototype.js'></script>
<script src='effects.js'></script>
<script src='builder.js'></script>
<script src='validator.js'></script>
<script language="javascript" type="text/javascript">
Event.observe(window,'load',function(){
validator = new Validator('form1','msg');
})
</script>
<title></title>
</head>
<body>
<form id='form1' action='ajaxsubmit'>
<input type='text' num id='tx1' required msg=' o k ' maxLength='2' />
<select>
<option>asfasdfasdf</option>
</select>
<input type='text' id='tx3' required msg='用户名不能为空' position="left"/>
<input type='text' id='tx2' />
<input type='button' onclick='validator.fireSubmit()' />
</form>
</body>
</html>
希望大家指出不足，一起讨论，一起进步 声明：JavaEye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
|
| 返回顶楼 | |
|
最后更新时间：2007-07-27
...看看这里
http://wiki.javascud.org/display/si/Javascript_EasyValidation |
| 返回顶楼 | |
|
最后更新时间：2007-07-27
谢谢Ivan Li,我会好好学习你写的源码，做成你那样是我的目标
|
| 返回顶楼 | |
|
最后更新时间：2007-07-27
Ivan, EasyValidation看上去很不错啊，这么好的东西怎么不多多宣传呢？
如果可以和webwork的服务器端验证集成到一起就更好了 |
| 返回顶楼 | |
|
最后更新时间：2007-07-28
Ivan Li 写道 ...看看这里
http://wiki.javascud.org/display/si/Javascript_EasyValidation to：Ivan Li. 引用 1. 我的网站现在使用的是UTF-8编码,怎么使用validation_cn.js显示中文会乱码? 答: validation_cn.js默认是使用GBK编码,使用可以改变文件编码的编辑器以UTF-8编码方式再保存,如保存为validation_cn_UTF-8.js 建议通过转义字符去解决这个问题。 比如： 将“中文” 编码成： “\u4e2d\u6587” 这样部署的时候就不会有中文乱码。 写一个简单的程序就可以转换过来，用JSA压缩后，也会自动处理这种问题。 仍外，代码注释中有中文也是危险的，编码不匹配的时候，有可能导致无法准确找到注释的结尾。 |
| 返回顶楼 | |
|
最后更新时间：2007-08-21
badqiu才是最大的功臣，这个主要是badqiu搞的！我只是跟着瞎参合了一下。
|
| 返回顶楼 | |
|
最后更新时间：2007-08-21
呵呵，我目前的做法比较简单。直接用的Event.observe，把回调函数直接写出来。比较直接。但是重用性不好。正好可以学学楼主的这个！ |
| 返回顶楼 | |
|
最后更新时间：2007-08-23
var Validator = Class.create();
Object.extend(Validator.prototype,{
initialize : function(form,className,options){
this.form = $(form);
this.options = Object.extend({
onlyNum : 'num',
required : 'required',
url : 'url',
maxLength : 'maxLength'
},options || {});
this.className = className;
this.fireType = null;//作用在后面说明
this.checked();
},
checked : function () {
this.form.getElements().each(function(obj,index){
if(this._isExistAttribute(obj,this.options.onlyNum)){
this._onlyNum(obj);
};
if(this._isExistAttribute(obj,this.options.required)){
obj.setStyle({
background : 'url(required1.gif) no-repeat right top'
})
setInterval(function(){if(!obj.value.blank())
obj.style.background = 'url(required.gif) no-repeat right top';
else
obj.style.background = 'url(required1.gif) no-repeat right top';
}.bind(this),10)
};
if(obj[this.options.maxLength]){
Event.observe(obj,'keydown',function(){
if(obj.value.length>parseInt(obj[this.options.maxLength]))
event.returnValue = false;
}.bind(this,obj))
}
if(obj[this.options.url]){
Event.observe(obj,'change',function(){
new Ajax.Request(obj[this.options.url],{
parameters : {value : obj.value},
onComplete : function(transport){
if(transport.responseText == 'true'){
if(!$(obj.id+'Div'))
this._createMsgDiv(obj,obj.urlMsg);
obj.focus();
obj.value = '';
}else
if($(obj.id+'Div'))
this._destoryMsgDiv(obj.id+'Div');
}.bind(this)
})
}.bind(this,obj))
}
}.bind(this))
},
//sumbit validate
fireSubmit : function (){
if(!this.fireType) this.fireType = event.srcElement;
var _needArr = this.form.getElements()
.findAll(function(obj){return this._isExistAttribute(obj,this.options.required)&& obj.value.blank()}.bind(this));
if(event.srcElement == this.fireType && _needArr.length == 0) this.form.submit();
else
_needArr.each(function(o){
Event.observe(o,'blur',function(){
if(!o.value.blank()){
if($(o.id+'Div')) this._destoryMsgDiv(o.id+'Div');
o.setStyle({
background : 'url(required.gif) no-repeat right top'
})
this.fireSubmit();
}else{
o.focus();
}
}.bind(this,o));
o.focus();
var msg = o.msg || 'the element can not empty';
this._createMsgDiv(o,msg);
throw $break;
}.bind(this));
},
//create show message div
_createMsgDiv : function(el,msg){
//IE6 select fix
if(!this.underlay){//ie select fix
this.underlay = document.body.appendChild(Builder.node('iframe',{id:'iframe'}));
Element.setStyle(this.underlay, {
position: 'absolute',
display: 'none',
border: 0,
margin: 0,
opacity: 0.01,
padding: 0,
background: 'none'
});
}
var _nDiv = document.body.appendChild(Builder.node('div',{id:el.id+'Div',className:this.className}));
_nDiv.innerText = msg.replace(/(^\s*)|(\s*$)/g, "");
_nDiv.style.height = el.offsetHeight;
switch (el.position){
case 'left' :
_nDiv.style.left = Position.cumulativeOffset(el)[0] - _nDiv.offsetWidth - 3 +'px';
_nDiv.style.top = Position.cumulativeOffset(el)[1] + 'px';
break;
case 'up' :
_nDiv.style.top = Position.cumulativeOffset(el)[1]- el.offsetHeight - 3+ 'px';
_nDiv.style.left = Position.cumulativeOffset(el)[0] + 'px';
break;
case 'down' :
_nDiv.style.top = Position.cumulativeOffset(el)[1]+ el.offsetHeight + 3+ 'px';
_nDiv.style.left = Position.cumulativeOffset(el)[0] + 'px';
break;
default :
_nDiv.style.top = Position.cumulativeOffset(el)[1] + 'px';
_nDiv.style.left = Position.cumulativeOffset(el)[0] + el.offsetWidth + 3 + 'px';
}
this.underlay.style.height = _nDiv.offsetHeight;
this.underlay.style.left = _nDiv.style.left;
this.underlay.style.top = _nDiv.style.top;
this.underlay.style.width = _nDiv.offsetWidth;
$('iframe').show();
_nDiv.style.display = 'none';
_nDiv.style.zIndex = '1200';
Effect.Appear(_nDiv);
},
//destory message div
_destoryMsgDiv : function (id){
if(!$(id)) return;
this.underlay.hide();
Effect.Fade(id,{afterFinish : function(){ document.body.removeChild($(id))}});
},
_isExistAttribute : function(el,attr){
return el.readAttribute(attr)!=null ? true : false;
},
//only input number
_onlyNum : function(obj){
Event.observe(obj,'keydown',function(e){
var e1 = event || e;
if(!((e1.keyCode>=48&&e1.keyCode<=57)||(e1.keyCode>=96&&e1.keyCode<=105)||(e1.keyCode==8)||(e1.keyCode==190)))
if(e1.keyCode==13)
e1.keyCode=9
else
e1.returnValue=false;
});
}
})
我的目的是当你，用fireSubmit提交时，会挨着遍历每个要添值却没有添的，但自己不会在都验证通过后，自动提交，而是当你在触发提交时才提交的，fireType记录的是你用那个元素出发fireSubmit,不一定是按钮，我们使用的就是图标 这是改进后的 我把整个源码和图都放在正文了，望大家多提意见，我会不断改进，程序就跟写作文一样，要不断的改进 |
| 返回顶楼 | |
|
最后更新时间：2007-08-23
和楼主一样我在学习prototype的时候也参考已有的各个实现写了表单验证easyvalidation， 后来才看到baidqiu的在也取了名字，竟然和我的一样，够郁闷的，呵呵。
你可以对比着看看，大家都是初学，呵呵 。http://jianfeng008cn.javaeye.com/admin/show/38717 欢迎意见建议，我计划是从小的东西入手 能写点好用js控件 |
| 返回顶楼 | |
