validator验证
<!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("validator.gif") no-repeat scroll 4px 4px transparent;border:1px solid #3196C4;color:#666666;line-height:20px;padding-left:25px;}
.validator_onerror {background:url("validator.gif") no-repeat scroll 4px -596px #FFF2E9;border:1px solid #FF6600;color:#666666;line-height:20px;padding-left:25px;}
.validator_oncorrect {background:url("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("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"></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"></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"></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"></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"></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="m6"></div></div>
</div>
<div class="clear"></div>
<input type="submit" value="保存" onclick="return submitForm()"/>
</form>
</div>
</body>
<script type="text/javascript">
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;//控件状态，默认2表示没验证，0表示不通过，1代表通过验证。
self.input=obj;
self.options=option;
self.text=self.options.focus;
self.init(obj);
}
validator.prototype.init=function(){
var self=this,contain;
self.tip=document.createElement('div');
if(typeof self.options.tips=='string'&&document.getElementById(self.options.tips))
contain=document.getElementById(self.options.tips);
else if(typeof self.options.tips=='object'&&self.options.tips.nodeType==1)
contain=self.options.tips;
contain&&contain.appendChild(self.tip);
addEvent(self.input,'focus',function(){
self.focus();
});
addEvent(self.input,'blur',function(){
self.valid();
});
if(typeof self.options.show!='undefined'){
self.tip.className='validator_onshow';
self.tip.innerHTML=self.options.show;
}
if(self.options.trim&&self.input.value.replace(/\s/ig,'')=='')//不用校验可以为空的控件，默认通过
self.tag=1;
}
validator.prototype.valid=function(){
var self=this;
var reg=self.options.reg||self.type;
var result=self.input.value;
if(result==''){
if(self.options.trim){
self.tip.className='validator_onshow';
self.tag=1;
return;
}else{
self.tip.className='validator_onerror';
self.tip.innerHTML=typeof(self.options.empty)=='undefined'?'不能为空！':self.options.empty;
self.tag=0;
return ;
}
}
if(self.options.type == 'identity'){
var checkIdcard=function(idcard){//身份证特别验证
var Errors=["验证通过!","身份证号码位数不对!","身份证号码出生日期超出范围或含有非法字符!","身份证号码校验错误!","身份证地区非法!"];
var area={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};
var idcard,Y,JYM,S,M,idcard_array = [],retflag=false;
idcard_array = idcard.split("");
//地区检验
if(area[parseInt(idcard.substr(0,2))]==null)return Errors[4];//身份号码位数及格式检验
switch(idcard.length){
case 15:
if((parseInt(idcard.substr(6,2))+1900) % 4 == 0 || ((parseInt(idcard.substr(6,2))+1900)%100 == 0 && (parseInt(idcard.substr(6,2))+1900) % 4 == 0 )){
ereg=/^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/;
//测试出生日期的合法性
}else{
ereg=/^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/;//测试出生日期的合法性
}
if(ereg.test(idcard))
return Errors[0];
else
return Errors[2];
break;
case 18:
//18位身份号码检测
//出生日期的合法性检查
//闰年月日:((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))
//平年月日:((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))
if(parseInt(idcard.substr(6,4)) % 4 == 0 || (parseInt(idcard.substr(6,4))%100 == 0&&parseInt(idcard.substr(6,4))%4 == 0 )){
ereg=/^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;//闰年出生日期的合法性正则表达式
}else{
ereg=/^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;//平年出生日期的合法性正则表达式
}
if(ereg.test(idcard)){//测试出生日期的合法性，计算校验位
S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7 + (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9 + (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10 + (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5 + (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8 + (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4 + (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2 + parseInt(idcard_array[7]) * 1 + parseInt(idcard_array[8]) * 6 + parseInt(idcard_array[9]) * 3 ;
Y = S % 11;
M = "F";
JYM = "10X98765432";
M = JYM.substr(Y,1);//判断校验位
if(M == idcard_array[17])
return Errors[0]; //检测ID的校验位
else
return Errors[3];
}
else
return Errors[2];
break;
default:
return Errors[1];
break;
}
}
result=result.toUpperCase();
if(checkIdcard(result)=='验证通过!'){
self.tip.className='validator_oncorrect';
self.tip.innerHTML=typeof(self.options.correct)=='undefined'?'输入正确':self.options.correct;
self.tag=1;
}else{
self.tip.className='validator_onerror';
self.tip.innerHTML=typeof(self.options.error)=='undefined'?checkIdcard(result):self.options.error;
self.tag=0;
}
}else{
if(new RegExp(reg).test(result)){
self.tip.className='validator_oncorrect';
self.tip.innerHTML=typeof(self.options.correct)=='undefined'?'输入正确':self.options.correct;
self.tag=1;
}else{
self.tip.className='validator_onerror';
self.tip.innerHTML=typeof(self.options.error)=='undefined'?'您输入的内容不符合对应的规则!':self.options.error;
self.tag=0;
}
}
}
validator.prototype.focus=function(){
this.tip.className='validator_onfocus';
this.tip.innerHTML=this.text;
}
validator.prototype.remove=function(){
var self=this;
self.tip.innerHTML='';
self.tip.parentNode.removeChild(self.tip);
self.tag=1;
for(var i in self)
self[i]='';
self.valid=function(){}
self.focus=function(){}
self=null;
}
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',focus:'邮政编码只能为6位数字，有助于更快邮寄或快递。'});//第一个参数是绑定的对象，第二个是一个对象如果指定type则调用内部正则验证
arr[1]=validator(inputs[1],{type:'url',tips:'m2',trim:true,focus:'请正确输入url地址'});//trim表示该对象可以为空，默认校验通过
arr[2]=validator(inputs[2],{type:'email',tips:'m3',focus:'请输入正确的E-mail格式，并带有@符号，不区分大小写。'});
arr[3]=validator(inputs[3],{type:'mobile',tips:'m4',focus:'手机号码只能为11位数字。'});
arr[4]=validator(inputs[4],{tips:'m5',reg:'^-?\\d*$',focus:'请正确输入整数'});//也可以自己定义正则，tips是必须指定的用来显示提示信息。
arr[5]=validator(inputs[5],{tips:'m6',type:'identity',focus:'请正确输入身份证号码'}); function submitForm(){//提交表单自动遍历验证
var l=arr.length;
for(var i=0;i<arr.length;i++){
if(arr[i].tag==1||arr[i].tag=='')
l--;
else if(arr[i].tag==2){
arr[i].valid();
if(arr[i].tag==1)l--;
}
}
return l==0;
}
</script>
</html>
validator验证的更多相关文章
- //解决validator验证插件多个name相同只验证第一的问题
//解决validator验证插件多个name相同只验证第一的问题 var validatorName = function () { if ($.validator) { $.validator.p ...
- jQuery.validator 验证规则详解
前言:jQuery.validator是一款非常不错的表单验证插件,验证方式非常简单方便,它还对HTML5做了兼容处理,了解了验证规则,就基本掌握了它的使用,下面就让我一一道来 jQuery.vali ...
- Validator验证Ajax提交表单的方法
Validator验证Ajax提交表单的方法 转自:http://hunanpengdake.iteye.com/blog/1671360 当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form ...
- Validator验证框架
Validator验证框架 系统分析 在设计Validator验证框架时,需要明确以下问题. (1)当用户没有输入数据时,弹出英文提示信息. (2)当用户输入的数据长度大于系统设置的数据长度,弹出英文 ...
- Converter(转换器)与Formatter(格式化) ,Validator(验证器)
Converter(转换器)与Formatter(格式化)都可以用于将一种对象类型转换为另一种对象类型.Converter是通用元件,可以在应用程序的任意层中使用,而Fotermatter这是专门为W ...
- vue学习记录：vue引入，validator验证，数据信息，vuex数据共享
最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...
- Hibernate Validator验证框架中@NotEmpty、@NotBlank、@NotNull 的区别
Hibernate Validator验证框架中@NotEmpty.@NotBlank.@NotNull的主要使用情况 @NotEmpty 用在集合类上面 @NotBlank 用在String上 ...
- vue props 下有验证器 validator 验证数据返回true false后，false给default值
vue props 下有验证器 validator 验证数据返回true false后,false给default值 props: { type: { validator (value) { retu ...
- laravel拓展validator验证
https://blog.csdn.net/zl20117/article/details/53536520 首先,扩展的收个问题是,我的扩展类应该放在哪儿才好呢? 直接在app目录下,建立一个目录: ...
- Hibernate Validator验证标签说明
Hibernate Validator是JSR-303的一个实现. 在FormBean里添加Hibernate Validator的注解,与定义一个校验类的做法相比.注解更加简洁.灵活. Bean V ...
随机推荐
- CNN－梯度下降
一.梯度检测: 对于函数而言通常有两种计算梯度的方式: 1.数值梯度 (numberical gradient) 2.解析梯度 (analytic gradient ) 数值梯度计算通常为: 更为常见 ...
- span标记
span标记为内联元素,本身布局有宽高所以要给他个属性 display:block; 转成快元素.
- nl2br()与nl2p()函数，php在字符串中的新行（\n）之前插入换行符
使用情景 很多场合我们只是简单用textarea获取用户的长篇输入,而没有用编辑器.用户输入的换行以“\n”的方式入库,输出的时候有时候会没有换行,一大片文字直接出来了.这个时候可以根据库里的“\n” ...
- ListBox 如何改变某行的字体颜色
Option Explicit Private Type RECT Left As Long Top As Long Right As Long Bottom As Long End Type Pri ...
- python socket服务器进行远程升级
# coding:utf-8from socket import *import binascii, linecache, time ServerUrl = "127.0.0.1:900&q ...
- Ecstore安装篇-1.运行系统环境要求
运行系统环境要求 运行系统环境要求 author :James,jimingsong@vip.qq.com since :2015-03-01 支持的操作系统 支持的WEB服务器 支持的浏览器 支持的 ...
- 私有云Rabbitmq 集群部署
默认openstack使用rabbitmq做信息队列,如果想要是云高可用,那么需要对每个涉及的组件都进行高可用配置,本文介绍如何使用rabbitmq 做高可用 高可用方法 通过 Erlang 的分布式 ...
- 浏览器标题栏添加小logo图片，记录一下，方便以后用
效果如图:这是富连网的logo的实现,只需一行代码,我就写给自己和那些不知道的人吧 <link rel="icon" type="image/x-icon" ...
- some links
rename user: http://www.cyberciti.biz/faq/howto-change-rename-user-name-id/
- js、jquery的入口函数及其执行与图片加载的先后顺序
js的入口函数写法: window.onload = function() { }; 如果文件中有多个window.onload入口函数,则只会执行最后一个,之前的入口函数没有用. jquery的入口 ...