Client-side validation of asp.net mvc: implementation of jquery Verification in model verification

After a simple understanding of how the unobtrusive JavaScript form of validation is programmed in jquery, let's explain how asp.net MVC uses it to implement client-side validation. Server-side validation is ultimately implemented in the corresponding Modelvalidator, and the final validation rules are defined in the corresponding Validationattribute, while the client validation rules pass Htmlhelper<tmodel> The corresponding extension methods (such as Textboxfor, Editorfor, and Edidtorformodel) appear in the generated validated HTML element. There is no doubt that the same validation rules must be used for both server and client validation, and the validation rules defined by applying the Validationattribute attribute are also reflected on the client-side validation rules of HTML.

First, Validationattribute and HTML

asp.net MVC silently employs declarative model validation based on Validationattribute features, and server-side validation is finally implemented in two overridden IsValid methods. For client-side validation, asp.net MVC extends the validation plug-in for jquery, implementing a different inline method where we can define validation rules in the properties of the validated INPUT element. In order for the client and server to adopt the same validation rules, the Validationattribute attribute applied to an attribute of model type will eventually be reflected on the HTML element corresponding to the target attribute.

   1:public class Contact
   2: {
   3:     [DisplayName ("name")]
   4: [Required (errormessage = "Please enter {0}!")] 5: [Stringlength (8, errormessage= "as {0} string length cannot exceed {1}!")] 6: Public     string Name {get; set;}
   7:
   8:     [DisplayName ("E-mail Address")]
   9: [RegularExpression (@ "^\w+@[a-za-z_]+?\.[ a-za-z]{2,3}$ ", errormessage=" Please enter the correct email address! ")] Public     string EmailAddress {get; set;}
  11:}

Let's say we have a string that is applied to the Name property representing the previous data type Contact,requiredattribute and Stringlengthattribute attribute to be used to ensure that no more than 128 characters must be entered. The EmailAddress attribute, which represents an email address, applies a regularexpressionattribute to ensure that a valid email address is entered. In a view with this contact model type, if we call the htmlhelper<tmodel> extension method Editorformodel, the following HTML will eventually be generated.

1: <div class= "Editor-label" >
2: <label for= "name" > Name </label>
3: </div>
4:
5: <div class= "Editor-field" >
6: <input class= "Text-box single-line"
7:Data-val = "true" 8:data-val-length = "As name string length cannot exceed 8!" 9:Data-val-length-max = "8" 10:data-val-required = "Please enter your name!" 11:id= "name" name= "name" type= "text" value= ""/>
<span class= "Field-validation-valid" data-valmsg-for= "Name" data-valmsg-replace= "true" ></span>
</div>
14:
: <div class= "Editor-label" >
<label for= "EmailAddress" > E-mail address </label>
: </div>
18:
: <div class= "Editor-field" >
<input class= "Text-box single-line"
21st:Data-val = "true" 22:Data-val-regex = "Please enter the correct e-mail address!" " 23:Data-val-regex-pattern = "^\w+@[a-za-z_]+?\." [A-za-z] {2,3}$ " 24:id= "EmailAddress" name = "EmailAddress" type= "text" value= ""/>
<span class= "Field-validation-valid" data-valmsg-for= "EmailAddress" data-valmsg-replace= "true" ></span >
: </div>

Through this HTML, we can see that the <input> element corresponding to the model object two attributes has a "data-val" attribute and a series of properties prefixed with "data-val-", which indicates whether the value entered by the user needs to be validated. The latter represents the corresponding validation rules. Specifically, the attribute name after removing the "data-val-" prefix corresponds to the validation rule name that was used in jquery validation.

In general, a validationattribute corresponds to an authentication type and a series of optional validation parameters. For example, the RequiredAttribute, Stringlengthattribute, and Regularexpressionattribute corresponding authentication types are "required", "Length" and "regex" respectively, The Stringlengthattribute and Regularexpressionattribute each have a validation parameter Length-max (representing the maximum length of the allowed string) and regex-pattern (regular expressions). Validation error messages are generally used as the value of the validation type attribute, and the property value corresponding to the validation parameter is naturally the corresponding property value.

For the HTML generated above, it is also worth mentioning that the <input> element corresponding to the validated property will be followed by a <span> element to display the error message after the validation failed. The CSS type of the <span> element is "Field-validation-valid", which we can use to customize the display style of the error message.