Validator verification controls use the code-form special effect

Because the code is relatively simple and less annotated, it is mainly used to verify simple rules (you can also add Regular Expressions by yourself if you have built-in ones, and complex methods are not supported at the moment ), it also handles the verification during form submission. The main idea is to follow a previously jQuery-based validator plug-in. The following is the js Code (it is not elegant when binding objects. I hope you can give me some advice !)

The Code is as follows:

Function validator (obj, option) {// verification 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, 'focal ', 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 = 'entered correctly ';
Self. tag = 1;
} Else {
Self. tip. className = 'validator _ onerror ';
Self. tip. innerHTML = 'sorry, the content you entered does not comply with the rules! ';
Self. tag = 0;
}
}
Validator. prototype. focus = function (){
This. tip. className = 'validator _ onfocus ';
This. tip. innerHTML = this. text;
}
Function addEvent (el, type, fn) {// bind an event
If (el. attachEvent ){
El ['E' + type + fn] = fn; // copy element references under IE to point this to the el object instead of the 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 call Method
Var inputs = document. getElementsByTagName ('input'); // The method here is strange, not elegant enough, and no optimization method is found.
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 a 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. A small icon may be missing, and you do not know how to send executable code.

The Code is as follows:

Verify controls



Verify controls