前面一篇文章我们介绍了HTML5中custom data-*特性，在Asp.net MVC Web App中原来我们对表单有验证，需要写这个js与Jquery Validation 插件配合, 回顾一下，看下面的代码:

                 
    
  
     
                  
       
                        
                    User name                
                        
                                                        
                   
                   
                        
                    Email address                
                        
                                                        
                   
                   
                        
                    Password                
                        
                                                        
                   
                   
                        
                    Confirm password                
                        
                                                        
                   
              
     
        
     
    
    

JS 通常像这样:

$(document).ready(function () {    $.validator.addMethod('Email', function (value) {        return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);    }, 'Please enter correct email.');    $("form").validate({        rules: {            UserName: { required: true },            Email: { required: true, Email: true },            Password: { required: true, range: [6, 12] },            ConfirmPassword: { required: true, equalTo: "#Password" }        }            , messages: {                UserName: { required: "Please enter UserName" },                Email: { required: "Please enter Email", Email: "Please enter corret email" },                Password: { required: "Please enter Password", range: "must be at least 6 characters long." },                ConfirmPassword: { required: "Please enter confirm password." }            }                , wrapper: "p",        errorPlacement: function (error, element) {            if (error != null) {                error.insertAfter(element);            }        }    })});

接下来我们在Asp.net MVC 3 web 中，启用Unobtrusive JavaScript来帮做验证，我们只需在Web.config设置

View, 先引用jquery.validate.unobtrusive.min.js,接着是这样的：

 

@model Mvc3App.Models.RegisterModel@{    Layout = null;}                    @Html.ValidationSummary("Errors have occurred:")    @using (Html.BeginForm())    {        
    
                 
      
                       
                    @Html.LabelFor(m => m.UserName)                
                       
                    @Html.TextBoxFor(i => i.UserName)                    @Html.ValidationMessageFor(i => i.UserName)                
                  
                  
                       
                    @Html.LabelFor(m => m.Email)                
                       
                    @Html.TextBoxFor(i => i.Email)                    @Html.ValidationMessageFor(i => i.Email)                
                  
                  
                       
                    @Html.LabelFor(m => m.Password)                
                       
                    @Html.PasswordFor(i => i.Password)                    @Html.ValidationMessageFor(i => i.Password)                
                  
                  
                       
                    @Html.LabelFor(m => m.ConfirmPassword)                
                       
                    @Html.PasswordFor(i => i.ConfirmPassword)                    @Html.ValidationMessageFor(i => i.ConfirmPassword)                
                  
             
    
            }

Model类, 注意上面使用是System.ComponentModel.DataAnnotations特性。

public class RegisterModel{    [Required]    [Display(Name = "User name")]    [RegularExpression("^[A-Za-z0-9]+$",ErrorMessage="Please correct format user name.")]    public string UserName { get; set; }    [Required]    [DataType(DataType.EmailAddress)]    [Display(Name = "Email address")]    [RegularExpression(@"^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$", ErrorMessage = "Please correct format Email.")]    public string Email { get; set; }    [Required]    [StringLength(12, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]    [DataType(DataType.Password)]    [Display(Name = "Password")]    public string Password { get; set; }    [DataType(DataType.Password)]    [Display(Name = "Confirm password")]    [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]    public string ConfirmPassword { get; set; }}

 

这时最后render出来html，你有看到那些验证规则都出来了:

                    
    
        
     
                  
       
                        
                    User name                
                        
                                                        
                   
                   
                        
                    Email address                
                        
                                                        
                   
                   
                        
                    Password                
                        
                                                        
                   
                   
                        
                    Confirm password                
                        
                                                        
                   
              
     
        
     
    

有注意到上面的html中，有加入相应data-*特性。这就是ASP.NET MVC 3 特性之一，注意这里必须使用BeginForm才能生成它们。最后我们能实现相同的验证效果，而我们不需要单独写JS了。别需要注意是，如果引入jquery.validate.unobtrusive相关js, 再其它地方使用  $("form").validate() 时，则不会生效。原因是jquery.validate.unobtrusive提前注册validate方法，它会与你自已定义冲突.

如果你想看看有哪个内在验证规则，可以运行下面的html:

作者：

出处：

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

该文章也同时发布在我的独立博客中-。