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 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
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
深入file_get_contents与curl函数的详解
2013/06/25 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
护理专业推荐信
2013/11/07 职场文书
医药营销个人求职信
2014/04/12 职场文书
法制宣传教育方案
2014/05/09 职场文书
绿色环保标语
2014/06/12 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
干部考核工作总结2015
2015/07/24 职场文书
计算机教师工作总结
2015/08/13 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS