asp.net MVC client-side validation: jquery verification

The model validation we've been talking about before is limited to server-side validation, where the Web servers validate the request data against the appropriate rules. If we can validate the data entered by the user in the client (browser), it will reduce the frequency of requests to the server, thereby easing the pressure on Web server access. Asp. MVC 2.0 and its previous version used ASP.net ajax for client-side validation, and in ASP.net MVC 3.0, the jquery validation framework was introduced as a way to perform client-side validation using unobtrusive JavaScript.

First, unobtrusive JavaScript

Unobtrusive JavaScript has become a guideline for javasccript programming, unobtrusive JavaScript embodies a mainstream web design strategy, "incremental enhancements" (pe,progressive Enhancement) ". It implements the separation of Web page content and functionality in a layered way, that is, JavaScript used to implement a function is not embedded in the HTML used to expose content, but rather as an independent hierarchy based on HTML.

Let's take validation as an example, a Web page has a form where we need to validate input for three text boxes (foo, bar, and Baz) in the form. Assuming that the specific validation operation is implemented in the Validate function, we can use the following HTML to validate the input data when the corresponding text box loses focus.

   1: <form action= "/" >
   2:     <input id= "foo" type= "text" onblur= "Validate ()"/>
   3:     <input id= "bar" type= "text" onblur= "Validate ()"/>
   4:     <input id= "baz" type= "text" onblur= "Validate ()"/>
   5:..     
   6: </form>

But this is not a good design, the ideal way is to let HTML only define the structure of content rendering, let the CSS control the style of content rendering, and the implementation of all functions defined in JavaScript, so the call to implement validation of JavaScript should not appear in the HTML. So according to unobtrusive JavaScript programming, we should replace the inline implementation of event registration (onblur= "Validate ()") with the following form.

   1: <form action= "/" >
   2:   <input id= "foo" type= "text"/>
   3:   <input id= "bar" type= "text"/>
   4:   <input id= "baz" type= "text"/>
   5: </form>
   6:
7: <script type= "Text/javascript" >
   1:
2:     window.onload = function () {
   3:         document.getElementById ("foo"). onblur = Validate;
   4:         document.getElementById ("Bar"). onblur = Validate;
   5:         document.getElementById ("Baz"). onblur = Validate;
   6:     } </script>

Unobtrusive JavaScript is a very broad topic, it is not possible to launch a systematic introduction in this article. Unobtrusive JavaScript is well represented in the jquery validation process, and then we'll briefly explain how to use jquery for validation.

To specify validation rules in an inline manner

The validation of jquery is actually validation of the input elements that exist in the form, and it supports an inline (Inline) programming approach where we can directly write the validation rules directly in the class (representing the CSS type) attribute of the validated input HTML element. Given that some readers may be unfamiliar with the validation framework for jquery, let's do a simple example validation.

While it's OK to demonstrate jquery validation using a simple HTML file, here we create an empty Web application from Visual Studio's ASP.net MVC project template for two purposes: first, The project automatically adds the. js file that contains the jquery itself and its validation plug-ins during the creation process, and second, you can ensure that the. js file we are using for validation is consistent with the. js file that asp.net mvc actually uses. We create the following default HomeController, which renders the default view in the action method index.

   1:public class Homecontroller:controller
   2: {
   3: Public     actionresult Index ()
   4:     {
   5: Return         View (new Contact ());
   6:     }
   7:}

We will define the entire HTML as the rendering Web page in the view that corresponds to the action method, as the code snippet shown below is the definition of the view. Because we use view to define the final rendered full HTML, we set the layout to null.

1: @{
2:layout = null;
3:}
4: <! DOCTYPE html>
5: 6: 7: <link href= "@System. WEB.OPTIMIZATION.BUNDLETABLE.BUNDLES.RESOLVEBUNDLEURL (" ~/content/css ")" rel= "stylesheet "Type=" Text/css "/>
8: <script type= "Text/javascript" src= "Http://www.cnblogs.com/Scripts/jquery-1.6.2.js" >
</script>
1:
2: <script type= "Text/javascript" src= "Http://www.cnblogs.com/Scripts/jquery.validate.js"/>
3: <script type= "Text/javascript" >
4: $ (document). Ready (function () {
5: $ ("form"). Validate ();
6: $ ("Td:first-child"). CSS ("text-align", "right");
7:});
8: </script>
9: <style type= "Text/css" >
10:label.error{color:red;}
One: </style>
<title>Index</title>
: <body>
: <form action= "/" >
: <table>
: <tr>
<td> name:</td>
: <td><input class= "required" id= "name" name= "name" type= "text"/></td>
</tr>
<tr>
<td> Birth date:</td>
: <td><input class= "Required Date" id= "Birhthdate" name= "birhthdate" type= "text"/></td>
: </tr>
: <tr>
Num: <td>blog address:</td>
: <td><input class= "Required url" id= "blogaddress" name= "blogaddress" type= "text"/></td>
: </tr>
: <tr>
<td>email Address:</td>
: <td><input class= "required email" id= "EmailAddress" name= "EmailAddress" type= "text"/&GT;&LT;/TD&G T
</tr>
: <tr>
&LT;TD colspan= "2" ><input type= "Submit" value= "Save"/></td>
</tr>
-</table>
Panax Notoginseng: </form>
: </body>
: