Home > Developer > JavaScript
Introduction:
First of all, please come with me to reviewBridging Mode(BRIDGE:
In this design mode, our abstract classes and implementation classes can be expanded and encapsulated separately so that they can beDecoupling, And many changes are produced through combination. This idea is also in line with"Less inheritance, more combinations"In the bridge mode, we can use the aggregate action class to bridge the conreteimplementor and the refinedized abstract class. But how does JavaScript implement bridging? Please follow me
1 // Validation class:
2
3 View plain
4 Validation = {
5 Required: function (ELEM ){
6 Return ! $ (ELEM). Val (). Trim (). isnullorempty ();
7 },
8 Email: function (ELEM ){
9 Returnvalidation. regexvalidator ($ (ELEM). Val (). Trim (), validation. RegEx. Email );
10 },
11 Regexvalidator: function (elemval, /* String */ RegEx ,){
12 If (! Elemval. isnullorempty ()&&! (Elemval. Match (RegEx, " \ G " ))){
13 Returnfalse;
14 } Else {
15 Returntrue;
16 };
17 },
18 RegEx :{
19 Email:/^ \ W + ([-+.] \ W +) * @ \ W + ([-.] \ W + )*\. \ W + ([-.] \ W + )? $/
20 }
21 };
22 Validation. validatecoll = {
23 ' JQ-Validation-required ' : {Validfunc: Validation. required, errmsg: ' Required ' },
24 ' JQ-Validation-Email ' : {Validfunc: Validation. Email, errmsg: ' Invalid email address ' }
25 };
26 Validator class:
27
28 View plain
29 (Function (){
30 Varvalidator_elements_blur_selector = ' Input [type = "text"] ' ;
31 Varvalidator_elements_change_selector = ' Select, input [type = "hidden"] ' ;
32 VaR Validator_elements_selector = validator_elements_blur_selector + ' , ' + Validator_elements_change_selector;
33
34 Validator = function (validatescopeselector ){
35 This . _ Validatecoll = $. Extend ( True , {}, Validation. _ validatecoll );
36 This . _ Validatedom = $ (validatescopeselector );
37 Varthevalidator = This ;
38 This . _ Validatedom. Delegate (Validator_elements_blur_selector, ' Blur ' , Function (){
39 Thevalidator. validateinput ( This , ' Blur ' );
40 });
41 This . _ Validatedom. Delegate (Validator_elements_change_selector, ' Change ' , Function (){
42 Varinputvalidated = thevalidator. validateinput ( This , ' Change ' );
43 });
44 };
45
46 Validator. Prototype = {
47 Validate: function (){
48 Varvalidated = True ;
49 Varthevalidator = This ;
50 $ (Validator_elements_selector, This . _ Validatedom). Each (function (){
51 If (! Thevalidator. validateinput. Call (thevalidator, This )){
52 Validated = False ;
53 };
54 });
55 Returnvalidated;
56 },
57 Validateinput: function (ELEM, Event ){
58 Varinput = $ (ELEM );
59 Varclassarr = input. ATTR ( ' Class ' ). Split ( ' ' );
60
61 Varvalidated = True ;
62 Varinvalidtable =New Hashtable ();
63 For ( VaR I = 0 ; I <classarr. length; I ++ ){
64 Varclassitem = classarr [I];
65 If (! Classitem. startwith ( ' JQ-validation ' )) Continue ;
66 Varvalidateitem = This . _ Validatecoll [classitem];
67 If (Validateitem & validateitem. validfunc ){
68 If (! Validateitem. validfunc (input, validateitem )){
69 Validated = False ;
70 If (! Strpopuperr. isnullorempty ()){
71 Strpopuperr + = " " ;
72 }
73 Invalidtable. Add (classitem, validateitem );
74 }
75 }
76 }
77 Returnvalidated;
78 }
79 };
80 })();
81 // Call example:
82 <HTML>
83 <Div id = " Validation_region " >
84 <Input type =" Text " Class = " JQ-Validation-required " />
85 <Input type = " Text " Class = " JQ-Validation-Email " />
86 </Div>
87 <Input type = " Button " Onclick = " Submit () " />
88
89 <Script language = " Javascript " Type = " Text/JavaScript " >
90 VaR Validator = New Validator ( " # Validation_region " );
91 Function submit (){
92 If (Validator. Validate ()){
93 Alert ( ' Verification passed! ' );
94 } Else {
95 Alert ( ' Verification Failed! ' );
96 }
97 }
98 </SCRIPT>
99 </Html>
Explanation:
1. Design Philosophy
Among them, validation can define and extend the methods of various verification rules, while validator is responsible for handling error prompts after verification and how to correctly feedbackCodeWhether the caller passes the verification. validation. validatecoll defines which type of verification rules to call. Their respective division of labor is clear, which also conforms to the design principle of a single responsibility. In the above code, we can see that the validation object is the implementation class, while the validator object is the corrected abstract class, while the validation. validatecoll is the bridge (this definition is not available in the classic gof 23 mode ). Of course, the above Code cannot be fully described here according to the terms defined in the design pattern. We only design and construct our code according to the ideas and concepts of the design model.
2. Working Principle
In the call example:
VaR validator = newvalidator ("# validation_region ");
After the page is loaded, we first instantiate the validator object and pass in the scope to be verified. Here we pass in the ID of the region to be verified, we use jquery's $ () method to convert the selector "# validation_region" to an operational DOM object.
When the button is clicked, the submit method is called. Then, validator is executed. the validate method. This method uses jquery's each method to traverse all input controls within the verification range for verification, and finally returns the verification result.
In the internal method of validate, we can also add the function of changing the style of input and error prompt when verification is not passed. The general method is to add a red border to the input to prompt the user, here, this function requires the reader to expand according to the project's needs.
3. extended verification rules
We have explained the design concept and working principle above. How can we expand validation?
We only need to add a new verification Rule Method to the validation object, and bridge the verification type (input class name) and the new validation rule in validation. validatecoll.
For example:
If we want to add a rule to verify whether it is a number, we need to add
Number: function (ELEM ){
Return! Isnan ($ (ELEM). Val ());
}
And add it to validation. validatecoll.
'Jq-Validation-number': {validfunc: Validation. Number, errmsg: 'notnumber '}
In this case, you do not need to change any validator code. You can add 'jq-Validation-number' to the input class for digit rule verification.
Here we need to note that if you need to perform multiple verification rules for an input, you can write the names of multiple verification rules in the class separated by spaces.
For example:
<Input type = "text" class = "JQ-Validation-requiredjq-Validation-number"/>
Note:The image is taken from the design model series of the blog Park Lu Zhenyu. You can refer to the reference address to learn more about the Bridge Mode:
Http://www.cnblogs.com/zhenyulu/articles/62720.html
Reprinted please indicate the source: http://www.cnblogs.com/RobbinHan/archive/2011/12/05/2270707.html
Author: November rain http://www.cnblogs.com/RobbinHan
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
