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 Html code output through TextFor through the attribute marked with [Required] attribute:
<Input data-val = "true" data-val-required = "The User name field is required. "id =" UserName "name =" UserName "type =" text "value =" "class =" valid ">
Copy code
• Data-val: whether client verification is required
• Data-val-required: verification type and error message
II. Implementation of jquery. validate. unobtrusive. js
1. unobtrusive custom verification rules
1 var $ jQval = $. validator,
2 adapters,
3 data_validation = "unobtrusiveValidation ";
Copy code
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}
Copy code
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.
2. Integrate 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}
Copy code
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 },
Copy code
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.

 

From the rain of November