validator验证控件使用代码

下面是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>

赞 (0)

相关推荐

  • ASP.net的验证控件浅析

    ASP.net的验证控件浅析

    ①.数据格式验证控件(RegularExpressionValidator) 复制代码 代码如下: <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="此用户名已注册过" ControlToValidate = "txtName" ValidationExpression = "

  • asp.net MaxLengthValidator 最大长度验证控件代码

    复制代码 代码如下: /// <summary> /// TextBox的最大长度验证器,如果是varchar,char字段类型,需要此验证 /// </summary> [Description("对MaxLength进行验证")] [ToolboxData("<{0}:MaxLengthValidator runat=server></{0}:MaxLengthValidator>")] public class

  • ASP.NET中验证控件的使用方法

    ASP.NET中验证控件的使用方法

    对于这些常用的控件有效性验证,在Asp.Net中有单独的验证控件可供使用.他们可以满足一般的,诸如非空,范围.比较等的验证,为用户登录页面添加输入数据验证功能和验证码功能. 验证控件: Asp.Net中内置的验证控件有:RequiredFieldValidation.RangeValidation.RegularExpressValidation.CompareValidation.CustomValidation和ValidationSummary等六种.其中用户自定义验证控件,由于并不非常常

  • 验证控件与Button的OnClientClick事件详细解析

    一.事件 这是一个长期被我忽略或者是没有发现的问题,问题是这样的: 在一个页面中,当有验证控件的时候,当Button控件触发OnClientClick事件,并且这个事件会返回true和false的时候,验证控件就会失效,不起作用了.具体描述如下: .Net页面如下: 复制代码 代码如下: <form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1"

  • asp.net 控件验证 FCKeditor

    经过查找网上的资料,发现好像是它本身的一个问题,原文如下: With ASP.Net, I need to submit twice when using the RequiredFieldValidator in a FCKeditor instance FCKeditor will not work properly with the Required Field Validator when the "EnableClientScript" property of the val

  • C#验证控件validator的简单使用

    ASP.NET为开发人员提供了一套简单实用的服务器控件来验证用户输入的信息是否有效.这些控件的主要属性有id(控件的唯一id).ControlToValidate(被验证的控件的id).ErrorMessage(当验证失败时,在控件中显示的文本).runat(规定该控件是一个服务器控件.必须设置为 "server"). 1.RequiredFieldValidator:验证一个必填字段,如果这个字段没填,那么将不能提交信息. 下例为文本框输入是否为空的验证,输入内容为空时报错.代码如下

  • validator验证控件使用代码

    下面是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':'

  • 浅析Bootstrap验证控件的使用

    废话不多说,本文大概给大家分享两块代码,第一块前端HTML代码,第二块js代码,代码简单易懂,关键代码如下所示: 前端HTML代码 <form id="myForm" method="post" class="form-horizontal" action="/Task/Test"> <div class="modal-body"> <div class="form-

  • 使用jQuery.Validate进行客户端验证（初级篇） 不使用微软验证控件的理由

    使用jQuery.Validate进行客户端验证（初级篇） 不使用微软验证控件的理由

    主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件的常用方式,你要使用一个控件你得从工具栏中拖到页面里(当然你也可以不拖手写). 2.必须指定验证对象,验证控件与其他textbox,dropdownlist控件不同的是它是验证其他控件的输入是否有效的,所以必须指定所验证的对象. 3.影响整个页面美观,像一些管理系统总是需要进行大量的用户输入验证,所以就可能导致一个页面上有几十个验证控件严重影响了原来页面里的东西,看起来十分不舒服. 4.ajax验证不方便,现在的系统越来越注重客户的用户体验,

  • ASP.NET中Validation验证控件正则表达式特殊符号的说明

    RegularExpressionValidator控件表达式说明: 方括号"[ ]"用与定义可接受的字符.[abc123] 表示控件只能接受 a,b,c,1,2,3 这6个字符: 反集合符号 " ^ "用于定义不可以接受的字符.[^a-h] 表示控件除了 a 到 h 8个字符外,都可以接受: 花括号"{ }"定义必须输入的字符个数.{6}表示只能输入6个字符 : {6,}表示必须输入6个以上,无上限 : {2,6} 表示必须输入2至6个字符:但

  • 使用CustomValidator自定义验证控件检查是否有对ListBox控件选择

    使用CustomValidator自定义验证控件检查是否有对ListBox控件选择

    在前网页前端处,我们放置ListBox控件,在数据提交前,检查用户是否有对此控件进行选择? Insus.NET的方法是使用Javascript与CustomValidator自定义验证控件来检查. 可以看到最终结果:  你也想参此例子,可以参考下面数据与准备方法,写一个对象,它将用来产生十个天干. HeavenlyStem.cs 复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using

  • ASP.NETWeb服务器验证控件如何使用

    ASP.NETWeb服务器验证控件如何使用

    什么是验证控件? 希望用户输入正确的类型的数据,为了验证用户输入是否满足要求,必须对输入的值.范围或格式进行检查. .NET中验证控件在哪里? 在工具箱的验证分组里. 常用的ASP.NET控件几个?分别是什么? 1)CompareValidator控件:与给定值比较． 2)CustomValidator控件:用户自己定制校验逻辑 3)RangeValidator控件:检查控件的值是否在给定的有效范围内. 4)RegularExpressValidator控件:使用正则表达式验证用户输入的数据是否

  • asp.net数据验证控件

    1.非空数据验证控件RequiredFiledValidator. 属性:ControlToValiata 指验证控件对哪一个控件进行验证.例如验证TextBox控件的ID属性txtPwd,只要将RequiredFiledValidator.控件的ControlToValidata属性设置为txtPwd.代码:this.RequiredFiledValidator1.ControlToValidata="txtPwd"; ErrorMessage属性:用于指定页面中使用Required

随机推荐