The following is the JS code (in the binding object when the feeling is not elegant, I hope the expert can guide twos Ah!) ）
Copy Code code as follows:
Function Validator (obj,option) {//Authentication object
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= ' input correct ';
self.tag=1;
}else{
Self.tip.classname= ' Validator_onerror ';
Self.tip.innerhtml= ' Sorry, the content you entered does not conform to the rules! ';
self.tag=0;
}
}
Validator.prototype.focus=function () {
This.tip.classname= ' Validator_onfocus ';
This.tip.innerhtml=this.text;
}
function Addevent (EL,TYPE,FN) {//binding event
if (el.attachevent) {
el[' e ' +type+fn] = fn; IE copy element reference so that this points to the El object instead of window
EL[TYPE+FN] = function () {el[' E ' +type+fn] (window.event);}
El.attachevent (' On ' +type, EL[TYPE+FN]);
}else
El.addeventlistener (Type, FN, false);
}
Page Invoke method
var inputs=document.getelementsbytagname (' input '); The writing here feels strange, not elegant enough to find a way to optimize for the time being.
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 () {//Submit form Filter
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;
}
The following is a page demo, may be missing a small icon, sweat, do not know how to send executable code.
Copy Code code as follows:
<! 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> validation Controls </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> validation Controls </h1>
<div id= "Example" class= "Tabs_panel" >
<form method= "POST" >
<div class= "Wrap" >
<div class= "Left" > Zip:</div>
<div class= "center" ><input type= "text" name= "validator" class= "TXT"/></div>
<div class= "right" ><div id= "M1" class= "Validator_onshow" > Zip code can only be 6 digits, contributing to faster mailing or courier. </div></div>
</div>
<div class= "Wrap" >
<div class= "left" > URL:</div>
<div class= "center" ><input type= "text" name= "validator" class= "TXT"/></div>
<div class= "right" ><div id= "m2" class= "validator_onshow" > Please enter the URL address correctly </div></div>
</div>
<div class= "Wrap" >
<div class= "left" > Mailbox:</div>
<div class= "center" ><input type= "text" name= "validator" class= "TXT"/></div>
<div class= "right" ><div id= "M3" class= "validator_onshow" > Please enter the correct e-mail format with the @ symbol, case-insensitive. </div></div>
</div>
<div class= "Wrap" >
<div class= "left" > Mobile:</div>
<div class= "center" ><input type= "text" name= "validator" class= "TXT"/></div>
<div class= "right" ><div id= "M4" class= "Validator_onshow" > Mobile phone number can only be 11 digits. </div></div>
</div>
<div class= "Wrap" >
<div class= "left" > Integer:</div>
<div class= "center" ><input type= "text" name= "validator" class= "TXT"/></div>
<div class= "right" ><div id= "M5" class= "Validator_onshow" > Please enter the integer </div></div> correctly
</div>
<div class= "Clear" ></div>
<input type= "Submit" value= "Save" onclick= "return SubmitForm ()"/>
</form>
</div>
</body>
<script type= "Text/javascript" src= "Style/js/validator.js" ></script>
</html>
