html表单验证程序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>vForm表单验证程序</title>
<style type="text/css">
<!--
div.info {
width: 170px;
overflow:visible;
height:auto;
font-size: small;
position: absolute;
background-color: #FFffdd;
border: 1px solid #000;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#111111,direction=135,strength=3);
top: 375px;
padding: 5px;
left: 671px;
}
div.info_title .err{
padding: 5px;
height: 50px;
width: 24em;
position: absolute;
background-color: #FFFFCC;
left: 196px;
top: 114px;
font-size: small;
opacity:0.5;
border: 1px double #333333;
filter: Shadow(Color=#000000, Direction=135);
filter:progid:DXImageTransform.Microsoft.Shadow(color=#111111,direction=135,strength=5); }
#form1 .text_input {
border-top: 1px solid #333333;
border-right: 1px solid #999999;
border-bottom: 1px solid #ddd;
border-left: 1px solid #000000;
}
.info_title {
color: #FF0000;
background: #ACB9D1;
}
#form1 {
position: static;
left: 581px;
top: 463px;
border: 1px solid #3300FF;
padding: 5px;
;
}
#imok {
display: block;
position: absolute;
height:315px;
overflow:scroll;
left: 100px;
top: 100px;
width: 306px;
}
.title h1 {
background: #33CCFF;
border-bottom: medium solid #3366FF;
}
.title p {
font-size: medium;
text-indent: 2em;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
} code {
font: 12px/18px "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif;
border:1px solid #0099cc;
padding:5px;
margin: 5px;
width: 80%;
color: #000;
background-color: #ddedfb;
display: block;
} -->
</style>
<script language="JavaScript" type="text/javascript">
//程序基本思路：通过扩展对象来实现，将String扩展 将默认的表单元素扩展 定义两个自定义对象。
//String.isEmail
//String.isUrl
//表单元素.required
//表单元素.isvalid
//表单元素.validate
// //字符串验证扩展
//├电子邮件验证
String.prototype.isEmail = function(){
var tmpStr = this;
var email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
return email.test(tmpStr)
}
//├http地址验证
String.prototype.isUrl = function(){
var url = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
var tmpStr = this;
return url.test(tmpStr);
}
//├日期验证（第一部分）
String.prototype.isDateTime = function(){
if(Date.parse(this)||Date.parseDate(this))
{
return true;
}
else
{
return false;
}
}
String.prototype.isInteger = function()
{
var _i = /^[-\+]?\d+$/;
var _s = this;
return _i.test(_s);
}
Date.prototype.toIsoDate = function()
{
var _d = this;
var _s;
_Y =_d.getFullYear();
_M = _d.getMonth() + 1;
_D = _d.getDate();
_H = _d.getHours();
_I = _d.getMinutes();
_S = _d.getSeconds();
with(_d)
{
_s = [getMonth() + 1,getDate(),getHours(),getMinutes(),getSeconds()];
}
for(var i = 0; i < _s.length; i++)
{
if (_s[i].toString().length == 1)_s[i]= '0'+_s[i];
}
return (_Y + '-'+_s[0]+'-'+_s[1]+' '+_s[2]+':'+_s[3]+':'+_s[4])
}
//├日期验证（第二部分）
Date.parseDate = function(str, fmt) {
fmtfmt = fmt||"%Y-%m-%d %H:%M";
var today = new Date();
var y = 0;
var m = -1;
var d = 0;
var a = str.split(/\W+/);
var b = fmt.match(/%./g);
var i = 0, j = 0;
var hr = 0;
var min = 0;
for (i = 0; i < a.length; ++i) {
if (!a[i])
continue;
switch (b[i]) {
case "%d":
case "%e":
d = parseInt(a[i], 10);
break; case "%m":
m = parseInt(a[i], 10) - 1;
break; case "%Y":
case "%y":
y = parseInt(a[i], 10);
(y < 100) && (y += (y > 29) ? 1900 : 2000);
break; case "%b":
case "%B":
for (j = 0; j < 12; ++j) {
if (Calendar._MN[j].substr(0, a[i].length).toLowerCase() == a[i].toLowerCase()) { m = j; break; }
}
break; case "%H":
case "%I":
case "%k":
case "%l":
hr = parseInt(a[i], 10);
break; case "%P":
case "%p":
if (/pm/i.test(a[i]) && hr < 12)
hr += 12;
else if (/am/i.test(a[i]) && hr >= 12)
hr -= 12;
break; case "%M":
min = parseInt(a[i], 10);
break;
}
}
if (isNaN(y)) y = today.getFullYear();
if (isNaN(m)) m = today.getMonth();
if (isNaN(d)) d = today.getDate();
if (isNaN(hr)) hr = today.getHours();
if (isNaN(min)) min = today.getMinutes();
if (y != 0 && m != -1 && d != 0)
return new Date(y, m, d, hr, min, 0);
y = 0; m = -1; d = 0;
for (i = 0; i < a.length; ++i) {
if (a[i].search(/[a-zA-Z]+/) != -1) {
var t = -1;
for (j = 0; j < 12; ++j) {
if (Calendar._MN[j].substr(0, a[i].length).toLowerCase() == a[i].toLowerCase()) { t = j; break; }
}
if (t != -1) {
if (m != -1) {
d = m+1;
}
m = t;
}
} else if (parseInt(a[i], 10) <= 12 && m == -1) {
m = a[i]-1;
} else if (parseInt(a[i], 10) > 31 && y == 0) {
y = parseInt(a[i], 10);
(y < 100) && (y += (y > 29) ? 1900 : 2000);
} else if (d == 0) {
d = a[i];
}
}
if (y == 0)
y = today.getFullYear();
if (m != -1 && d != 0)
return new Date(y, m, d, hr, min, 0);
return today;
};
//扩展完成 //对象定义 var vform = new Object;
//获取弹出提示的显示位置
vform.getAbsolutePos = function(el) {
var _p = { x: 0, y: 0 };
do{
_p.x += (el.offsetLeft - el.scrollLeft);
_p.y += (el.offsetTop - el.scrollTop);
}
while(elel=el.offsetParent)
return _p;
};
vform.toString = function()
{
return("vForm表单验证程序\n版本：1.0beta\n作者：雷晓宝\n时间：2006-07-31\n网址：http://lxbzj.com\n许可：LGPL");
}
vform.rules = new Array;
vform.rules.add = function(obj,minLength,dataType,errmsg,maxLength,rule,patams)
{
var curlen = this.length;
this[curlen] = [obj,minLength,dataType,errmsg,maxLength,rule,patams];
//this[curlen] = [ 0 , 1 , 2 , 3 , 4 , 5 , 6 ]; return this.length;
}
vform.init= function()
{
if(document.getElementById(this.form_id))
{
//获取表单
var o = document.getElementById(this.form_id);
//遍历规则
for(var i = 0 ;i< this.rules.length;i++)
{
_r = this.rules[i]
//如果存在元素，则添加验证程序
if(_o = o.elements[_r[0]])
{
//判断是是否必填,是否有最小长度
if(_r[1] > 0 )
{
_o.required = true;//必填的含义和最小长度为1是一样的
_o.minLength = parseInt(_r[1]);
}
else
{
_o.required = false;
_o.minLength = 0;
}
//判断是否有最大长度;
if(_r[4])
{
_o.maxLength = parseInt(_r[4]);
}
//添加长度验证函数
_o.validLength = function ()
{
var b =true;
if(this.minLength)
{
b = (this.minLength <= this.value.length);
}
if(this.type == 'textarea' && this.maxLength )
{
bb = b && (this.maxLength >= this.value.length );
}
return (b);
}
//添加验证，进行格式验证
switch(_r[2])
{
case 'e-mail':
_o.validate = function()
{
thisthis.isvalid = this.validLength() && this.value.isEmail();
return (this.isvalid);
};
break;
case 'url':
_o.validate = function()
{
if (this.value.substring(0,7) != 'http://')this.value = 'http://' +this.value;
thisthis.isvalid = this.validLength() && this.value.isUrl();
return (this.isvalid);
}
break;
case 'date':
_o.validate = function()
{
var _d = Date.parse(this.value)||Date.parseDate(this.value);
this.value = _d.toIsoDate(); thisthis.isvalid = this.validLength() && this.value.isDateTime();
return (this.isvalid);
aa=a>b?1:1;
}
break;
case 'number':
_o.validate = function()
{
thisthis.isvalid = this.validLength() && this.value.isInteger();
return (this.isvalid); }
break;
case 'any':
_o.validate = function()
{
thisthis.isvalid = this.validLength();
return this.isvalid
}
break;
default :
var regexp = /^\\\w+$/;
if ( regexp.test(_r[2]))//表示必须和同表单下的某个字段的值一样。用于重复输入的验证
{
_el = _r[2].substring(1);
if (o.elements[_el]){
_o.equal = _el;
_o.validate = function()
{
if(_o = this.form.elements[this.equal])
{
if ( (_o.value == this.value) && this.validLength())
{
return true;
}else {
return false;
}
}else{
alert('setup error');
} }
}else
{
alert(_el + 'is not a valid form element');
_o.validate = function(){return true;}
}
}
var regexp1 = /^\\(==|!=|>=|<=|>|<)/;
if ( regexp1.test(_r[2]) )
{
_s0 = _r[2];
_s1 = RegExp.$1;
_s2 = _s0.replace(regexp1,'');
_operator = _s1.substring(0);//比较操作符
var regexp2 = /^\w+$/;
if (regexp2.test(_s2))//是一个标志符，整数 或者变量
{
_o.operation = _operator+_s2;
_o.validate = function()
{
_b = true;
if (this.value.length !=0)
{
_b = eval(this.value+this.operation+';');
}
_b_b = _b && this.validLength();
return _b;
}
}
};
break; }
//添加验证提示(div标签)并初始化
var _p = vform.getAbsolutePos(_o);
_o.tip = new tip(_r[3],vform.err_class,_p.x+_o.offsetWidth+3,_p.y); _o.tip.init();
//失去焦点时，开始验证
_o.onblur =function(e)
{
if(this.minLength || this.value.length >0)
{
if( this.validate() )
{
this.tip.hide();
}else
{
this.tip.show();//显示错误信息
//this.focus(); 添加这句在ie里会导致死循环 :(
return false;
}
}
}
}
}
//焦点验证可能会失败,所以最后需要表单提交前的验证作为最后的补充。
document.getElementById(this.form_id).onsubmit = function()
{
var valid = true;
for(i=0;i<this.elements.length;i++)
{
_o = this.elements[i];
if(_o.minLength && !_o.isvalid)
{
_o.tip.show();
valid = false;
}
}
return valid;
}
}
}
//弹出提示定义
function tip(text,className,x,y)
{
var o = document.createElement("div");
o.style.display = "none";
o.innerHTML = text;
//var t = document.createTextNode(text);
document.body.appendChild(o);
//o.appendChild(t); this.init = function(dis)
{
o.className = "info";
o.style.left = x+"px";
o.style.top = y+"px";
o.style.zindex = 100;
if(dis)
{
o.style.display = "";
}
else
{
o.style.display = "none";
}
}
this.show = function()
{
o.style.display = "";
}
this.hide = function()
{
o.style.display = "none";
}
}
function start()
{
vform.form_id = 'form1';//必须是表单的id
vform.err_class = 'info';//出错提示的样式
//验证规则，逐条填写
vform.rules.add('frm_name',1,'e-mail','请您按照 user@domain.com 的格式输入电子邮件地址。<br /><span style="color:#f00">必填项目</span>');
vform.rules.add('myweb',1,'url','请您按照 http://www.domain.com 的格式输入您的网址。<br /><span style="color:#f00">必填项目</span>');
vform.rules.add('dateinput',0,'date','请按2000-03-05 的格式输入日期。<br /><span style="color:#f00">必填项目</span>');
vform.rules.add('qq',0,'number','这必须是一个整数');
vform.rules.add('least10',10,'any','您必须至少填写10个<br /><span style="color:#f00">必填项目</span>');
vform.rules.add('ok100',1,'any','这里被限制为100个字符<br /><span style="color:#f00">必填项目</span>',100);
vform.rules.add('r_pass0',5,'any','密码最短5位最长20位<br /><span style="color:#f00">必填项目</span>',20);
vform.rules.add('r_pass1',5,"\\r_pass0",'确认密码错误<br /><span style="color:#f00">必填项目</span>',20);
vform.rules.add('frm_sel',1,"\\>2",'必须大于2000<br /><span style="color:#f00">必填项目</span>');
vform.init(); } </script>
</head>
<body onload="start()"> <form id="form1" name="form1" method="get" action="">
<label for="frm_name">e-mail:
<input name="frm_name" type="text" class="text_input" id="frm_name" title="输入一个电子邮箱地址"/>
</label>
*
<p>
<label for="r_pass0">输入密码：
<input name="r_pass0" type="text" class="text_input" id="r_pass0" title="输入您希望的密码 " />
</label>
*</p>
<p>
<label for="r_pass1">密码确认：
<input name="r_pass1" type="text" class="text_input" id="r_pass1" title="将密码确认一次" />
</label>
*</p>
<p>
<label for="frm_sel">选择：
<select name="frm_sel" id="frm_sel" title="请选择一个答案">
<option value="0">请选择一个答案</option>
<option value="1" selected="selected">1000</option>
<option value="2">2000</option>
<option value="3">3000</option>
<option value="4">4000</option>
<option value="5">5000</option>
<option value="6">6000</option>
</select>
</label>
*</p>
<p>
<label for="input3">输入网址：
<input name="myweb" type="text" class="text_input" id="input3" title="输入一个网址" onmousemove="" value="http://" maxlength="100"/>
</label>
*</p>
<p>
<label for="dateinput">输入日期
<input name="dateinput" type="text" class="text_input" title="输入一个日期" id="dateinput"/>
</label>
*</p>
<p>
<label for="mub">输入数字
<input name="qq" type="text" class="text_input" title="填写数字" id="mub"/>
</label>
</p>
<p>
<label for="len">输入任意但长度限制为10个
<input name="least10" type="text" class="text_input" maxlength="88" id="len"/>
*
</label>
</p>
<p>
<label for="text">只能输入100个
<textarea name="ok100" cols="40" rows="5" id="text" title="详细内容"></textarea>
*
</label>
</p>
<p>
<input type="submit" name="Submit" value="提交" />
<button onclick="alert(vform)" >关于验证程序</button>
</p>
</form>
<!--具体的日期设置，必须放在body的结束标签前面-->
<script type="text/javascript">
vform .init();
Calendar.setup({
inputField : "dateinput", // 把这个改成你需要的 id
ifFormat : "%Y-%m-%d %H:%M", // format of the input field
showsTime : true,
//button : "dateinput_btn",
timeFormat : "24"
});
</script>
</body>
</html>
html表单验证程序的更多相关文章
- PHP表单验证内容是否为空
内容为空效果图为: 填写内容效果图: 下面是验证程序的代码: <!doctype html> <html> <head> <meta http-equiv=& ...
- validate表单验证-单独验证
今天编写一个表单验证程序,我来说一下今天遇到的坑:程序不是通过submit按钮提交验证的,是在自己写的一个方法中提交的,出现了表单无法验证的情况.然后我就了解了一下jquery validate的验证 ...
- 微信小程序之表单验证
表单验证 何为表单验证呢? 百度百科给出的回答是这样的: 表单验证是javascript中的高级选项之一.JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 [ ...
- Django-website 程序案例系列-16 modle.form(表单验证)
案例程序: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 微信小程序——表单验证插件WxValidate的二次封装（终极版）
微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, ...
- 微信小程序——表单验证插件WxValidate的二次封装（二）
在上一篇博客<微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装>中,我将WxValidate做了再次封装,简化了初始规则数据的构造,但是当有错误时页面 ...
- 微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装（一）
在做web开发时,表单验证插件我们前端用的是jqueryValidate,由于个人主要精力是在后台JAVA开发上,为了让插件与后台更好的结合和使用,通过JAVA的自定义组件将表单全部重新写了一边,同时 ...
- 微信小程序 - 表单验证插件WxValidate使用
插件下载地址及官方文档:https://github.com/skyvow/wx-extend 具体的WxValidate.js文件的位置在wx-extend/src/assets/plugins/w ...
- 微信小程序 - 表单验证插件WxValidate（自定义警告信息形式）
弹出的形式对于用户来说,总是不太友好的 可能会出现层级问题(只需要设置一下提示的层级即可) WxValidate内置规则 以下代码拷贝即可使用~ wxml <form bindsubmit='s ...
随机推荐
- Linux下如何查看tomcat是否启动
在Linux系统下,重启Tomcat使用命令操作的! 首先,进入Tomcat下的bin目录 cd /usr/local/tomcat/bin 使用Tomcat关闭命令 ./shutdown.sh 查看 ...
- iOS开发系列--音频播放（音效和音乐）播放本地的
音频 在iOS中音频播放从形式上可以分为音效播放和音乐播放.前者主要指的是一些短音频播放,通常作为 点缀音频,对于这类音频不需要进行进度.循环等控制.后者指的是一些较长的音频,通常是主音频,对于这些音 ...
- windows编程原理
这里在学网络编程时遇到了讲解windows的编程,稍微整理一下windows编程原理,顺便复习一下. 首先,理解Windows 程序运行原理:Windows应用程序,操作系统,计算机硬件之间的相互关系 ...
- 『随笔』WCF开发那些需要注意的坑
执行如下 批处理:"C:\Program Files\Microsoft SDKs\Windows\v6.0A\Bin\svcutil.exe" http://127.0.0.1: ...
- 开源分布式计算引擎 & 开源搜索引擎 Iveely 0.5.0 为大数据而生
Iveely Computing 产生背景 08年的时候,我开始接触搜索引擎,当时遇到的第一个难题就是大数据实时并发处理,当时实验室的机器我们可以随便用,至少二三十台机器,可以,却没有程序可以将这些机 ...
- 接受客户端传的inputstream类型转成string类型
public string GetReqContent() { var request = HttpContext.Current.Request; var contentStream = reque ...
- 第三十二课：JSDeferred的性能提速
大家如果看了前面两课,就知道Deferred的静态方法next(next_default)是用setTimeout实现的(有浏览器最小时钟间隔).但是实现这种异步操作,可以有很多种方法.JSDefer ...
- 第九章：Javascript类和模块
(过年了,祝大家新年好!) 第6章详细介绍了javascript对象,每个javascript对象都是一个属性集合,相互之间没有任何联系.在javascript中也可以定义对象的类,让每个对象都共享某 ...
- 这些天自身努力的体会，关于java方面的
以前也是接触过java,这学期的软件工程课和周围同学各种比赛取得不错的成绩,确实令人倍感压力.为此这几天使劲脑补了一下java的知识,甚至不惜为此翘课,了解了java中的网络编程,对于sokectse ...
- 第九章：Java----泛型学习（最后过一遍）
泛型:让集合记住里面元素的类型,避免取出时需要强制类型转换(大到小). ClassCastException! 编译阶段就能发现错误. 语法更严格! 更不容易犯错! 1. 构造器的名字还是类名, ...