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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
JS实现前端动态分页码代码实例
Jun 02 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
将OICQ数据转成MYSQL数据
2006/10/09 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
详解puppeteer使用代理
2018/12/27 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
python正则表达式re模块详解
2014/06/25 Python
python的Template使用指南
2014/09/11 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
自荐书范文
2013/12/08 职场文书
酒吧副总经理岗位职责
2013/12/10 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
对照检查剖析材料
2014/09/30 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
单位委托函范文
2015/01/29 职场文书
田径运动会广播稿
2015/08/19 职场文书
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android