ASP.NET MVC 5 Jquery Validate

  1. ClientValidationEnabled

    在asp.net mvc 5中ClientValidationEnabled默认为TRUE,所以也不需要刻意去设置

  2. 应用ValidationAttribute

    这里使用内置的RequiredAttribute来演示

    public class Book
        {
            [Required(ErrorMessage = "BookID Is Required")]
            public string BookID { get; set; }
    
            public string Title { get; set; }
    
            public string Date { get; set; }
        }
    
  3. 引用相关JQuery

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    
  4. 在View中显示错误消息

       @Html.ValidationSummary()
       @Html.ValidationMessageFor(o => o.BookID)
    
  5. DOMReady中设置validate
<script type="text/javascript">
       $(function () {
           $("form").validate();
       });
    </script>

客户端view总览

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>View</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
   <script type="text/javascript">
       $(function () {
           $("form").validate();
       });
    </script>
</head>
<body>
    <form  action="/Home/ShowBook" method="POST">
     @Html.ValidationSummary()
        @Html.ValidationMessageFor(o => o.BookID)

        BookID   @Html.EditorFor(o => o.BookID)

        Title
        @Html.EditorFor(o => o.Title,new { @value= "WCF解密" })
        Day     <input id="Day" name="Day" value="12" type="text" />
        Month   <input id="Month" name="Month" value="12" type="text" />
        Year    <input id="Year" name="Year" value="2016" type="text" />

        <input id="Submit" type="Submit" value="Submit" />
    </form>
</body>
</html>

在这个例子中当你提交表单的时候,会验证客户端的数据是否符合validationAttribute的设置,如果不满足条件则显示错误提示

时间: 2024-11-05 01:32:06

ASP.NET MVC 5 Jquery Validate的相关文章

ASP.NET MVC使用jQuery无刷新上传

昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说,把源代码一一照搬的复制.难道它不能移值至ASP.NET MVC应用程序吗?Insus.NET想了一下,源代码是html+ashx的,它一定能的. 网友发送能正常运行的代码给Insus.NET...... 重点的script文件:http://download.cnblogs.com/insus/M

ASP.NET MVC使用jQuery来POST数据至数据库中

学习ASP.NET MVC程序,结合jQuery客户端代码,Post数据至数据库去.Insus.NET今天写一个完整性的例子. 在数据库中,创建一个表[dbo].[TestUser]: 既然是把数据存入数据库中,得先在数据库创建一个存储过程[dbo].[usp_TestUser_Insert]: 程序与数据库连接以及逻辑处理,使用这个http://www.cnblogs.com/insus/archive/2010/01/23/1654653.html 在MVC中,需要创建一个模型Insus.N

ASP.NET MVC和jQuery DataTable整合

本文包含代码示例说明如何jQuery插件开发者可以集成到ASP.NET MVC应用程序. 下载源代码- 87.4 KB Introduction The jQuery DataTables plug-in is an excellent client-side component that can be used to create rich-functional tables in the web browser. This plug-in adds lot of functionalitie

ASP.NET MVC使用jQuery实现Autocomplete

Insus.NET的以前的ASP.NET MVC的练习中,也有实现过Autocomplete的功能.依次是使用jQuery来实现. 首先在数据库准备一些数据: CREATE TABLE [dbo].[Item] ( [Item_nbr] INT IDENTITY(1,1) PRIMARY KEY NOT NULL, [ItemName] NVARCHAR(40) ) GO INSERT INTO [dbo].[Item] ( [ItemName] ) VALUES ('Q04-AA-0001')

ASP.NET MVC中jQuery与angularjs混合应用传参并绑定数据

要求是这样子的,在一个列表页中,用户点击详细铵钮,带记录的主键值至另一页.在另一外页中,获取记录数据,然后显示此记录数据在网页上. 先用动图演示: 昨天有分享为ng-click传递参数 <angularjs为ng-click事件传递参数>http://www.cnblogs.com/insus/p/7017737.html 上面仅仅是在ng-click传入一个值,但是在ASP.NET MVC中,还需要把这个值传至另外一个视图中<ASP.NET MVC传递参数(model)>http

asp.net MVC 使用JQuery.Ajax

使用到:Jquery.js 以及 Newtonsoft.Json.dll 客户端调用方式: $("#ButAjax").click(function() {$.ajax({type: "POST", //默认是GETurl: "/AjaxTest/getPerson",data: "ID=1&FirstName=C&LastName=HY",async: true, //异步cache: false, //不加

ASP.NET MVC验证 - jQuery异步验证

本文主要体验通过jQuery异步验证. 在很多的教材和案例中,MVC验证都是通过提交表单进行的.通过提交表单,可以很容易获得验证出错信息.因为,无论是客户端验证还是服务端验证,总能找到与Model属性或验证特性对应的html元素和属性,并把错误信息显示出来.可是,在实际项目中,经常会遇到需要异步提交的情况.那么,如何把服务端的验证错误信息传递给前端视图呢? □ 思路 1.服务端的验证错误信息是可以收集起来的以json形式传递个视图的.2.服务端把错误信息存放在一个字典集合Dictionary<s

ASP.NET MVC 使用Jquery Uploadify 在非IE浏览器下Http Error的解决方案

解决Uploadify上传控件在非IE浏览器中不工作,需要做如下2步修改: 1.Global.asax文件中,实现Application_BeginRequest函数: void Application_BeginRequest(object sender, EventArgs e) { try { string session_param_name = "ASPSESSID"; string session_cookie_name = "ASP.NET_SessionId&

Asp.net mvc 添加Jquery UI

1.使用NuGet下载jquery ui Install-Package jQuery.UI.Combined 2.下载多语言文件: development-bundle/i18n目录下是jquery的日历语言.注:只有Legacy版本才有 也可以用nuget下载 Install-Package jQuery.UI.i18n 2.编辑 BundleConfig.cs 注意:这里我用了自己下载的一个theme"start",自己下才有 http://jqueryui.com/download/ /