Asp.net MVC source code analysis-model validation (client) Implementation (2)

In the previous article, we introduced how to output the client validation information to the browser. Next we will analyze whether MVC is implemented for JavaScript verification.

I. HTML text output by textfor

First, let's take a look at the htmlCode:

<InputData-Val= "True"Data-Val-required= "The User Name field is required ."ID= "Username"Name= "Username"Type= "Text"Value= ""Class= "Valid">
 

• Data-VAL: whether client verification is required

• Data-Val-required: verification type and error message

Ii. jquery. Validate. unobtrusive. js Implementation 1. unobtrusive custom verification rules

1 VaR$ Jqval = $. validator,
2Adapters,
3Data_validation = "unobtrusivevalidation ";
 

We can see that the $ jqval object is actually the $. validator object.

 1 $ Jqval. unobtrusive = {
 2 Adapters: [],
 3   
 4 Adapters = $ jqval. unobtrusive. adapters;
 5 Adapters. Add = Function (Adaptername, Params, FN ){
 6            If (! FN ){ //  Called with no Params, just a function  
  7 Fn = Params;
 8 Params = [];
 9 }
 10             This. Push ({Name: adaptername, Params: Params, adapt: fn }); 
 11             Return   This ;
12 };
 13    
 14 Adapters. Add ("required ", Function (Options ){
 15                   If (Options. element. tagname. touppercase ()! = "Input" | options. element. type. touppercase ()! = "Checkbox "){
 16 Setvalidationvalues (options, "required ", True );
 17 }
 18 });
 19 }

The code above is Row 3. We can see that unobtrusive puts all the verification rules related to MVC to $ jqval. unobtrusive. in the adapters (array) object. what if jquery calls these verification rules? Let's take a look at. 2. Integration with jquery in adapter Mode

Let's take a look at jquery. validate. unobtrusive. the implementation of JS calls $ jqval during initialization. unobtrusive. note the preceding 42nd rows for the parse method. unobtrusive only verifies the input control whose data-Val is set to true.

 1 $ ( Function (){
 2 $ Jqval. unobtrusive. parse (document );
 3 });
 4   
 5      Function Validationinfo (form ){
 6            VaR $ Form = $ (form ),
 7 Result = $ form. Data (data_validation );
 8   
 9            If (! Result ){
 10 Result = {
 11 Options :{ //  Options structure passed to jquery validate's validate () method 
  12 Errorclass: "input-Validation-error ",
 13 Errorelement: "span ",
 14 Errorplacement: $. Proxy (onerror, form ),
 15 Invalidhandler: $. Proxy (onerrors, form ),
 16 Messages :{},
 17 Rules :{},
 18 Success: $. Proxy (onsuccess, form)
 19 },
 20 Attachvalidation: Function (){
 21                       $ Form. Validate (this. Options ); 
 22 },
 23 Validate: Function (){ //  A validation function that is called by unobtrusive Ajax  
 24 $ Form. Validate ();
 25                        Return $ Form. Valid ();
 26 }
 27 };
 28 $ Form. Data (data_validation, result );
 29 }
 30   
 31            Return Result;
32 }
 33   
 34 Parse: Function (Selector ){
 35 $ (Selector). Find (": input [data-val = true]"). Each ( Function (){
 36                    $ Jqval. unobtrusive. parseelement (this, true ); 
 37 });
 38   
 39 $ ("Form"). Each ( Function (){
 40                    VaR Info = validationinfo ( This );
 41                    If (Info ){
 42 Info. attachvalidation ();
 43 }
 44 });
 45 }

The above code line 21st calls the valildate method of jquery to verify the Form. How does this. Options get it?

It is completed in the $ jqval. unobtrusive. parseelement method.

 1 Parseelement: Function (Element, skipattach ){
 2      
 3                VaR $ Element = $ (element ),
 4 Form = $ element. Parents ("form") [0],
 5 Valinfo, rules, messages;
 6   
 7               If (! Form ){ //  Cannot do client-side validation without a form  
  8                    Return ;
 9 }
 10   
 11 Valinfo = validationinfo (form );
 12 Valinfo. Options. Rules [element. Name] = Rules = {};
 13 Valinfo. Options. Messages [element. Name] = messages = {};
 14   
 15 $. Each ( This . Adapters, Function (){
 16                    VaR Prefix = "data-Val-" + This . Name,
 17 Message = $ element. ATTR (prefix ),
 18 Paramvalues = {};
 19   
 20                    If (Message! = Undefined ){ //  Compare against undefined, because an empty message is legal (and falsy)  
  21 Prefix + = "-";
 22   
 23 $. Each ( This . Params, Function (){
 24 Paramvalues [This ] = $ Element. ATTR (prefix + This );
 25 });
 26   
 27                        This . Adapt ({
 28 Element: element,
 29 Form: form,
 30 Message: message,
 31 Params: paramvalues,
 32 Rules: rules,
 33 Messages: messages
 34 });
 35 }
 36 });
 37   
 38 Jquery. Extend (rules, {"_ dummy __": True });
 39   
 40                If (! Skipattach ){
 41 Valinfo. attachvalidation ();
 42 }
 43 },

Summary:

• $ Jqval. unobtrusive uses the adapter mode to encapsulate jquery's validate Method
• Unobtrusive only verifies the input control whose data-Val is set to true.

Reprinted please indicate the source: http://www.cnblogs.com/RobbinHan/archive/2011/12/19/2293391.html

Author: November rain http://www.cnblogs.com/RobbinHan