一区二区三区欧美a级,国产性色强伦免费视频,在线观看无码免费的av

　簡(jiǎn)潔的表單驗(yàn)證程序

作者：mickeyboy　時(shí)間： 2006-08-21　文檔類型：原創(chuàng)　來(lái)自：藍(lán)色理想

第 1 頁(yè) 簡(jiǎn)潔的表單驗(yàn)證程序 [1]
第 2 頁(yè) 簡(jiǎn)潔的表單驗(yàn)證程序 [1]

驗(yàn)證規(guī)則參數(shù)：

obj — 表單控件name

minLength — 填寫的字符串最小長(zhǎng)度0意味著可以不填而1意味著是必添

dataType — 驗(yàn)證格式有

e-mail
url
date
number
any
還有兩種動(dòng)態(tài)的格式用\開頭, \表單控件的name 表示必須與之的值一樣；
\>數(shù)字表示大于數(shù)字，類推；但是沒(méi)有\(zhòng)>=這樣的

maxLength — 最大長(zhǎng)度。

與其他程序不一樣的是：我對(duì)http地址與日期格式地址的處理不同，填入的地址沒(méi)有http://我會(huì)添加上后驗(yàn)證，這樣比較人性化，符合可用性的要求。日期的處理也是一樣，先盡可能的對(duì)填寫的數(shù)字進(jìn)行格式轉(zhuǎn)化，然后再驗(yàn)證。格式采用了yyyy-mm-dd的格式。

原始位置：http://lxbzj.com/product/vform/index.htm ，原始文件應(yīng)用一個(gè)日歷輸入控件在此省略。。。

總代碼：

運(yùn)行代碼框
<!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表單驗(yàn)證程序</title> <style type="text/css">  </style> <script language="JavaScript" type="text/javascript"> //程序基本思路：通過(guò)擴(kuò)展對(duì)象來(lái)實(shí)現(xiàn)，將String擴(kuò)展將默認(rèn)的表單元素?cái)U(kuò)展定義兩個(gè)自定義對(duì)象。 //String.isEmail //String.isUrl //表單元素.required //表單元素.isvalid //表單元素.validate // //字符串驗(yàn)證擴(kuò)展 //├電子郵件驗(yàn)證 String.prototype.isEmail = function(){ var tmpStr = this; var email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; return email.test(tmpStr) } //├http地址驗(yàn)證 String.prototype.isUrl = function(){ var url = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/; var tmpStr = this; return url.test(tmpStr); } //├日期驗(yàn)證（第一部分） 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]) } //├日期驗(yàn)證（第二部分） Date.parseDate = function(str, fmt) { fmt = 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; }; //擴(kuò)展完成 //對(duì)象定義 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(el=el.offsetParent) return _p; }; vform.toString = function() { return("vForm表單驗(yàn)證程序\n版本：1.0beta\n作者：雷曉寶\n時(shí)間：2006-07-31\n網(wǎng)址：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); //遍歷規(guī)則 for(var i = 0 ;i< this.rules.length;i++) { _r = this.rules[i] //如果存在元素，則添加驗(yàn)證程序 if(_o = o.elements[_r[0]]) { //判斷是是否必填,是否有最小長(zhǎng)度 if(_r[1] > 0 ) { _o.required = true;//必填的含義和最小長(zhǎng)度為1是一樣的 _o.minLength = parseInt(_r[1]); } else { _o.required = false; _o.minLength = 0; } //判斷是否有最大長(zhǎng)度; if(_r[4]) { _o.maxLength = parseInt(_r[4]); } //添加長(zhǎng)度驗(yàn)證函數(shù) _o.validLength = function () { var b =true; if(this.minLength) { b = (this.minLength <= this.value.length); } if(this.type == 'textarea' && this.maxLength ) { b = b && (this.maxLength >= this.value.length ); } return (b); } //添加驗(yàn)證，進(jìn)行格式驗(yàn)證 switch(_r[2]) { case 'e-mail': _o.validate = function() { this.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; this.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(); this.isvalid = this.validLength() && this.value.isDateTime(); return (this.isvalid); a=a>b?1:1; } break; case 'number': _o.validate = function() { this.isvalid = this.validLength() && this.value.isInteger(); return (this.isvalid); } break; case 'any': _o.validate = function() { this.isvalid = this.validLength(); return this.isvalid } break; default : var regexp = /^\\\w+$/; if ( regexp.test(_r[2]))//表示必須和同表單下的某個(gè)字段的值一樣。用于重復(fù)輸入的驗(yàn)證 { _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))//是一個(gè)標(biāo)志符，整數(shù) 或者變量 { _o.operation = _operator+_s2; _o.validate = function() { _b = true; if (this.value.length !=0) { _b = eval(this.value+this.operation+';'); } _b = _b && this.validLength(); return _b; } } }; break; } //添加驗(yàn)證提示(div標(biāo)簽)并初始化 var _p = vform.getAbsolutePos(_o); _o.tip = new tip(_r[3],vform.err_class,_p.x+_o.offsetWidth+3,_p.y); _o.tip.init(); //失去焦點(diǎn)時(shí)，開始驗(yàn)證 _o.onblur =function(e) { if(this.minLength || this.value.length >0) { if( this.validate() ) { this.tip.hide(); }else { this.tip.show();//顯示錯(cuò)誤信息 //this.focus(); 添加這句在ie里會(huì)導(dǎo)致死循環(huán) :( return false; } } } } } //焦點(diǎn)驗(yàn)證可能會(huì)失敗,所以最后需要表單提交前的驗(yàn)證作為最后的補(bǔ)充。 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';//出錯(cuò)提示的樣式 //驗(yàn)證規(guī)則，逐條填寫 vform.rules.add('frm_name',1,'e-mail','請(qǐng)您按照 user@domain.com 的格式輸入電子郵件地址。<br /><span style="color:#f00">必填項(xiàng)目</span>'); vform.rules.add('myweb',1,'url','請(qǐng)您按照 http://www.domain.com 的格式輸入您的網(wǎng)址。<br /><span style="color:#f00">必填項(xiàng)目</span>'); vform.rules.add('dateinput',0,'date','請(qǐng)按2000-03-05 的格式輸入日期。<br /><span style="color:#f00">必填項(xiàng)目</span>'); vform.rules.add('qq',0,'number','這必須是一個(gè)整數(shù)'); vform.rules.add('least10',10,'any','您必須至少填寫10個(gè)<br /><span style="color:#f00">必填項(xiàng)目</span>'); vform.rules.add('ok100',1,'any','這里被限制為100個(gè)字符<br /><span style="color:#f00">必填項(xiàng)目</span>',100); vform.rules.add('r_pass0',5,'any','密碼最短5位最長(zhǎng)20位<br /><span style="color:#f00">必填項(xiàng)目</span>',20); vform.rules.add('r_pass1',5,"\\r_pass0",'確認(rèn)密碼錯(cuò)誤<br /><span style="color:#f00">必填項(xiàng)目</span>',20); vform.rules.add('frm_sel',1,"\\>2",'必須大于2000<br /><span style="color:#f00">必填項(xiàng)目</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="輸入一個(gè)電子郵箱地址"/> </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">密碼確認(rèn)： <input name="r_pass1" type="text" class="text_input" id="r_pass1" title="將密碼確認(rèn)一次" /> </label> *</p> <p> <label for="frm_sel">選擇： <select name="frm_sel" id="frm_sel" title="請(qǐng)選擇一個(gè)答案"> <option value="0">請(qǐng)選擇一個(gè)答案</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">輸入網(wǎng)址： <input name="myweb" type="text" class="text_input" id="input3" title="輸入一個(gè)網(wǎng)址" onmousemove="" value="http://" maxlength="100"/> </label> *</p> <p> <label for="dateinput">輸入日期 <input name="dateinput" type="text" class="text_input" title="輸入一個(gè)日期" id="dateinput"/> </label> *</p> <p> <label for="mub">輸入數(shù)字 <input name="qq" type="text" class="text_input" title="填寫數(shù)字" id="mub"/> </label> </p> <p> <label for="len">輸入任意但長(zhǎng)度限制為10個(gè) <input name="least10" type="text" class="text_input" maxlength="88" id="len"/> * </label> </p> <p> <label for="text">只能輸入100個(gè) <textarea name="ok100" cols="40" rows="5" id="text" title="詳細(xì)內(nèi)容"></textarea> * </label> </p> <p> <input type="submit" name="Submit" value="提交" /> <button onclick="alert(vform)" >關(guān)于驗(yàn)證程序</button> </p> </form>  <script type="text/javascript"> vform .init(); Calendar.setup({ inputField : "dateinput", // 把這個(gè)改成你需要的 id ifFormat : "%Y-%m-%d %H:%M", // format of the input field showsTime : true, //button : "dateinput_btn", timeFormat : "24" }); </script>  <div class="title"> <h1>vForm1.0beta</h1> <ul> <li>作者：雷曉寶</li> <li>時(shí)間：2006-08-08</li> <li>網(wǎng)址：http://lxbzj.com</li> <li>e-mail:lxbzmy@163.com</li> <li>許可：LGPL</li> </ul> <h2>功能簡(jiǎn)述：</h2> <ol> <li> <h3>驗(yàn)證：</h3> <ul> <li>http地址。</li> <li>時(shí)間日期</li> <li>e-mail</li> <li>數(shù)字</li> <li>字符長(zhǎng)度檢查</li> <li>一項(xiàng)輸入與另一項(xiàng)輸入比較（例如：密碼的確認(rèn)輸入）</li> <li>大小比較（只能有一個(gè)比較符號(hào)）</li> </ul> </li> <li> <h3>特點(diǎn)</h3> <ul> <li>擴(kuò)展容易，可以方便的添加自己需要的驗(yàn)證方式</li> <li>兼容性好（ie5,6 firefox,oprea）。</li> <li>可用性好，沒(méi)有使用alert()來(lái)彈出提示;</li> </ul> </li> </ol> <p> </p> <h2>使用方法</h2> <p>使用時(shí)，需要定義一個(gè)出錯(cuò)提示框的樣式，本例的樣式為：<code>div.info { width: 170px;<br /> overflow:visible;<br /> height:auto;<br /> font-size: small;<br /> position: absolute;<br /> background-color: #FFffdd;<br /> border: 1px solid #000;<br /> filter:progid:DXImageTransform.Microsoft.Shadow(color=#111111,direction=135,strength=3);<br /> padding: 5px;<br /> }</code></p> <p>然后在網(wǎng)頁(yè)<head>部分中添加<code><script type="text/javascript" src="calendar/calendar.js"></script></code><br /> ，然后可以寫一個(gè)函數(shù)設(shè)置表單名稱，驗(yàn)證規(guī)則，<code>function start()<br /> { <br /> vFormvform.form_id = 'form1';<br /> vform.err_class = 'info';<br /> // (obj,required(true/false),dataType,errmsg,minlen,maxlen,rule,patams)<br /> //驗(yàn)證規(guī)則，逐條填寫<br /> vform.rules.add('frm_name',1,'e-mail','請(qǐng)您按照 user@domain.com 的格式輸入電子郵件地址。<br /><span style="color:#f00">必填項(xiàng)目</span>');<br /> vform.rules.add('myweb',1,'url','請(qǐng)您按照 http://www.domain.com 的格式輸入您的網(wǎng)址。<br /><span style="color:#f00">必填項(xiàng)目</span>');<br /> vform.rules.add('dateinput',0,'date','請(qǐng)按2000-03-05 的格式輸入日期。<br /><span style="color:#f00">必填項(xiàng)目</span>');<br /> vform.rules.add('qq',0,'number','這必須是一個(gè)整數(shù)');<br /> vform.rules.add('least10',10,'any','您必須至少填寫10個(gè)<br /><span style="color:#f00">必填項(xiàng)目</span>');<br /> vform.rules.add('ok100',1,'any','這里被限制為100個(gè)字符<br /><span style="color:#f00">必填項(xiàng)目</span>',100);<br /> vform.init();<br /> }</code>最后為body添加onload事件。 <code> <body onload="start();"> </code></p> <p> </p> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2668287-1-5.html

出處：藍(lán)色理想
責(zé)任編輯：moby

上一頁(yè) 簡(jiǎn)潔的表單驗(yàn)證程序 [1] 下一頁(yè)

◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論

相關(guān)文章

更多相關(guān)鏈接

AJAX應(yīng)用之草稿自動(dòng)保存

AJAX請(qǐng)求類

常見可用性錯(cuò)誤——表單組件錯(cuò)誤

ThickBox 2.0——JS展示腳本

[JS]點(diǎn)出統(tǒng)計(jì)器


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁(yè)制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大�！熬�•自然”設(shè)計(jì)大賽開啟

國(guó)際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行

中國(guó)國(guó)防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問(wèn)題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語(yǔ)言的編碼規(guī)范

如何在illustrator中繪制臺(tái)歷

Ps簡(jiǎn)單繪制一個(gè)可愛的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡(jiǎn)單的作品展示頁(yè)面

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開發(fā)項(xiàng)目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx