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 chrome浏览器判断代码
Mar 28 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
vue中实现上传文件给后台实例详解
Aug 22 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
PHP技术开发技巧分享
2010/03/23 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
心得体会范文
2014/01/04 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
甲午大海战观后感
2015/06/02 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
导游词之清晏园
2019/11/22 职场文书
详解如何使用Nginx解决跨域问题
2022/05/06 Servers
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang