1+ <!doctype html>
2+ < html >
3+ < head >
4+ < meta charset ="utf-8 ">
5+ < title > Strategy</ title >
6+ </ head >
7+ < body >
8+ < form class ="validateForm ">
9+ < label for ="fieldName "> Name: < input type ="text " id ="fieldName " class ="validate " value ="Apple " data-validate ="isNonEmpty ">
10+ < label for ="fieldMobile "> Mobile: < input type ="text " id ="fieldMobile " class ="validate " value ="0912-345678 ">
11+ < a href ="# " class ="submit "> validate!</ a >
12+ </ form >
13+ < script src ="http://code.jquery.com/jquery-1.8.2.min.js "> </ script >
14+ < script >
15+ ( function ( $ ) {
16+ $ . fn . formValidator = function ( opts ) {
17+ // default configuration
18+ var config = $ . extend ( { } , {
19+ opt1 : null
20+ } , opts ) ;
21+ // main function
22+ function init ( obj ) {
23+ var dObj = $ ( obj ) ,
24+ dValidateItems = dObj . find ( '.validate' ) ,
25+ dSubmitBtn = dObj . find ( '.submit' ) ;
26+
27+ var validator = {
28+ types : { } ,
29+ messages : [ ] ,
30+ config : { } ,
31+ validate : function ( data ) {
32+ var i ,
33+ msg ,
34+ type ,
35+ checker ,
36+ result_ok ;
37+ this . messages = [ ] ;
38+
39+ for ( i in data ) {
40+ if ( data . hasOwnProperty ( i ) ) { //i == name
41+ type = this . config [ i ] ; //type == config[name] == isNonEmpty
42+ checker = this . types [ type ] ; //checker == types[isNonEmpty] == {}
43+
44+ //要檢測的條件不存在，無法檢測
45+ if ( ! type ) {
46+ continue ;
47+ }
48+
49+ //要檢測的規則和錯誤訊息不存在，無法檢測，拋出異常
50+ if ( ! checker ) {
51+ continue
52+ }
53+
54+ //驗證
55+ result_ok = checker . validate ( data [ i ] ) ;
56+
57+ if ( ! result_ok ) {
58+ msg = "Invalid value for *" + i + "*, " + checker . errMsg ;
59+ this . messages . push ( msg ) ;
60+ }
61+ else {
62+ console . log ( 'Everything is OK!' ) ;
63+ }
64+ }
65+ }
66+ } ,
67+ hasErrors : function ( ) {
68+ var result = this . messages . length !== 0 ;
69+ return result ;
70+ }
71+ } ;
72+
73+ validator . types . isNonEmpty = {
74+ validate : function ( value ) {
75+ return value !== "" ;
76+ } ,
77+ errMsg : 'the value cannot be empty'
78+ } ;
79+
80+ dSubmitBtn . click ( function ( e ) {
81+ e . preventDefault ( ) ;
82+
83+ var data = { } ;
84+ $ . each ( dValidateItems , function ( i , val ) {
85+ data [ $ ( val ) . attr ( 'id' ) ] = $ ( val ) . val ( ) ;
86+ } ) ;
87+
88+ $ . each ( dValidateItems , function ( i , val ) {
89+ validator . config [ $ ( val ) . attr ( 'id' ) ] = $ ( val ) . data ( 'validate' ) ;
90+ } ) ;
91+
92+ validator . validate ( data ) ;
93+ if ( validator . hasErrors ( ) ) {
94+ console . log ( validator . messages . join ( '\n' ) ) ;
95+ }
96+
97+ } ) ;
98+ }
99+ // initialize every element
100+ this . each ( function ( ) {
101+ init ( $ ( this ) ) ;
102+ } ) ;
103+ return this ;
104+ } ;
105+ // start
106+ $ ( function ( ) {
107+ $ ( '.validateForm' ) . formValidator ( ) ;
108+ } ) ;
109+ } ) ( jQuery ) ;
110+ </ script >
111+ </ body >
112+ </ html >
0 commit comments