validator验证控件使用代码


Posted in Javascript onNovember 23, 2010

下面是js代码(在绑定对象的时候感觉很不优雅,希望高人能指点一二啊!)

function validator(obj,option){//验证对象 
var self = this; 
if(!(self instanceof validator)) 
return new validator(obj,option); 
self.source={'mobile':'^(13|14|15|18)[0-9]{9}$','postcode':'^\\d{6}$','integer':'^-?\\d*$','email':'^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$','url':'^http[s]?:\\/\\/([\\w-]+\\.)+[\\w-]+([\\w-./?%&=]*)?$'}; 
for(var i in self.source){ 
if(i==option.type) 
self.type=self.source[i]; 
} 
self.tag=2; 
self.input=obj; 
self.options=option; 
self.tip=document.getElementById(self.options.tips); 
self.text=self.tip.innerHTML; 
self.init(obj); 
} 
validator.prototype.init=function(o){ 
var self=this; 
addEvent(o,'focus',function(){ 
self.focus(); 
}); 
addEvent(o,'blur',function(){ 
self.valid(); 
}); 
} 
validator.prototype.valid=function(){ 
var self=this; 
var reg=self.options.reg||self.type; 
if(new RegExp(reg).test(self.input.value.replace(/\s/ig,''))){ 
self.tip.className='validator_oncorrect'; 
self.tip.innerHTML='输入正确'; 
self.tag=1; 
}else{ 
self.tip.className='validator_onerror'; 
self.tip.innerHTML='对不起,您输入的内容不符合规则!'; 
self.tag=0; 
} 
} 
validator.prototype.focus=function(){ 
this.tip.className='validator_onfocus'; 
this.tip.innerHTML=this.text; 
} 
function addEvent(el,type,fn){ //绑定事件 
if(el.attachEvent) { 
el['e'+type+fn] = fn; //IE下拷贝元素引用,使this指向el对象而不是window 
el[type+fn] = function(){el['e'+type+fn](window.event);} 
el.attachEvent('on'+type, el[type+fn]); 
}else 
el.addEventListener(type, fn, false); 
} 
//页面调用方法 
var inputs=document.getElementsByTagName('input');//这里的写法感觉怪怪的,不够优雅,暂时也没找到优化的办法 
var arr=[]; 
arr[0]=validator(inputs[0],{type:'postcode',tips:'m1'}); 
arr[1]=validator(inputs[1],{type:'url',tips:'m2'}); 
arr[2]=validator(inputs[2],{type:'email',tips:'m3'}); 
arr[3]=validator(inputs[3],{type:'mobile',tips:'m4'}); 
arr[4]=validator(inputs[4],{type:'integer',tips:'m5',reg:'^-?\\d*$'}); 
function submitForm(){//提交表单过滤 
var l=arr.length; 
for(var i in arr){ 
if(arr[i].tag==1) 
l--; 
else if(arr[i].tag==2){ 
arr[i].valid(); 
} 
} 
if(l!=0)return false; 
}

以下是页面demo,可能缺少一个小图标,汗,不知道怎么发可执行的代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<meta name="copyright" content="" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<title>验证控件</title> 
<style> 
body {padding:0; margin:0; font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;} 
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,form, fieldset, legend, button, input, textarea,th, td {margin: 0;padding: 0;} 
button, input, select, textarea {font: 12px/1.5 tahoma, arial, simsun, sans-serif;} 
h1, h2, h3, h4, h5, h6 { font-size: 100%;font-weight:normal; } 
address, cite, dfn, em, var { font-style: normal; } 
code, kbd, pre, samp { font-family: courier new, courier, monospace; } 
small { font-size: 12px; } 
ul, ol { list-style: none; } 
sup { vertical-align: text-top; } 
sub { vertical-align: text-bottom; } 
legend { color: #000; } 
fieldset, img { border: 0; } 
button, input, select, textarea { font-size: 100%; } 
table { border-collapse: collapse; border-spacing: 0; } 
.clear {clear:both;} 
html { overflow:-moz-bars-vertical; } 
a { text-decoration: none;} 
a:hover { text-decoration: underline;} 
.tabs_panel{margin:10px 0 0 20px;} 
.wrap {clear:left;} 
.left {height:25px;line-height:25px;width:160px;} 
.center {height:auto;padding:3px;width:230px;} 
.right {height:auto;width:350px;} 
.left, .center, .right {float:left;margin:4px;} 
input.txt {border:1px solid #CCCCCC;font-size:14px;height:20px;line-height:20px;width:188px;} 
.validator_onshow {background:url("../images/validator.gif") no-repeat scroll 4px 4px transparent;border:1px solid #3196C4;color:#666666;line-height:20px;padding-left:25px;} 
.validator_onerror {background:url("../images/validator.gif") no-repeat scroll 4px -596px #FFF2E9;border:1px solid #FF6600;color:#666666;line-height:20px;padding-left:25px;} 
.validator_oncorrect {background:url("../images/validator.gif") no-repeat scroll 4px -396px #FFFFFF;border:1px solid #3196C4;font-size:12px;line-height:20px;padding-left:25px;} 
.validator_onfocus {background:url("../images/validator.gif") no-repeat scroll 4px -196px #E2F3FF;border:1px solid #3196C4;color:#666666;line-height:20px;padding-left:25px;} 
</style> 
</head> 
<body> 
<h1>验证控件</h1> 
<div id="example" class="tabs_panel"> 
<form method="post"> 
<div class="wrap"> 
<div class="left">邮编:</div> 
<div class="center"><input type="text" name="validator" class="txt" /></div> 
<div class="right"><div id="m1" class="validator_onshow">邮政编码只能为6位数字,有助于更快邮寄或快递。</div></div> 
</div> 
<div class="wrap"> 
<div class="left">网址:</div> 
<div class="center"><input type="text" name="validator" class="txt" /></div> 
<div class="right"><div id="m2" class="validator_onshow">请正确输入url地址</div></div> 
</div> 
<div class="wrap"> 
<div class="left">邮箱:</div> 
<div class="center"><input type="text" name="validator" class="txt" /></div> 
<div class="right"><div id="m3" class="validator_onshow">请输入正确的E-mail格式,并带有@符号,不区分大小写。</div></div> 
</div> 
<div class="wrap"> 
<div class="left">手机:</div> 
<div class="center"><input type="text" name="validator" class="txt" /></div> 
<div class="right"><div id="m4" class="validator_onshow">手机号码只能为11位数字。</div></div> 
</div> 
<div class="wrap"> 
<div class="left">整数:</div> 
<div class="center"><input type="text" name="validator" class="txt"/></div> 
<div class="right"><div id="m5" class="validator_onshow">请正确输入整数</div></div> 
</div> 
<div class="clear"></div> 
<input type="submit" value="保存" onclick="return submitForm()"/> 
</form> 
</div> 
</body> 
<script type="text/javascript" src="style/js/validator.js"></script> 
</html>
Javascript 相关文章推荐
javascript 选择文件夹对话框(web)
Jul 07 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 Javascript
GreyBox技术总结(转)
Nov 23 #Javascript
Js基础学习资料
Nov 23 #Javascript
JavaScript 程序编码规范
Nov 23 #Javascript
javascript整除实现代码
Nov 23 #Javascript
flexigrid 参数说明
Nov 23 #Javascript
js 判断checkbox是否选中的实现代码
Nov 23 #Javascript
js 处理URL实用技巧
Nov 23 #Javascript
You might like
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
php cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
解密效果
2006/06/23 Javascript
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
怎样使用Python脚本日志功能
2016/08/14 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
先进个人评语大全
2015/01/04 职场文书
安阳殷墟导游词
2015/02/10 职场文书
财务稽核岗位职责
2015/04/13 职场文书
初中信息技术教学反思
2016/02/16 职场文书