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的设置,如果不满足条件则显示错误提示

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

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

    学习ASP.NET MVC程序,结合jQuery客户端代码,Post数据至数据库去.Insus.NET今天写一个完整性的例子. 在数据库中,创建一个表[dbo].[TestUser]: 既然是把数据存 ...

  2. ASP.NET MVC使用jQuery实现Autocomplete

    Insus.NET的以前的ASP.NET MVC的练习中,也有实现过Autocomplete的功能.依次是使用jQuery来实现. 首先在数据库准备一些数据: CREATE TABLE [dbo].[ ...

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

    昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...

  4. ASP.NET MVC和jQuery DataTable整合

    本文包含代码示例说明如何jQuery插件开发者可以集成到ASP.NET MVC应用程序. 下载源代码- 87.4 KB Introduction The jQuery DataTables plug- ...

  5. asp.net mvc 接收jquery ajax发送的数组对象

    <script type="text/javascript"> $(function () { var obj = { name: "军需品", m ...

  6. MVC中 jquery validate 不用submit方式验证表单或单个元素

    <script src="/Scripts/jquery-1.4.4.js"></script> <script src="/Scripts ...

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

    要求是这样子的,在一个列表页中,用户点击详细铵钮,带记录的主键值至另一页.在另一外页中,获取记录数据,然后显示此记录数据在网页上. 先用动图演示: 昨天有分享为ng-click传递参数 <ang ...

  8. mvc配合jquery.validate验证失效,情况之一

    用viewbage绑定input空间的value值,通过submit提交.validate验证失效. 1.应该是mvc的渲染顺序导致js验证失败. 解决方案:改用mvc自带的@html辅助方法,生成文 ...

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

    本文主要体验通过jQuery异步验证. 在很多的教材和案例中,MVC验证都是通过提交表单进行的.通过提交表单,可以很容易获得验证出错信息.因为,无论是客户端验证还是服务端验证,总能找到与Model属性 ...

随机推荐

  1. 【WPF】 通过FarPoint显示Excel

    1.FarPoint 只支持winform,在Wpf中要引用:WindowsFormsIntegration.dll2.*.xaml文件引用    xmlns:wfi ="clr-names ...

  2. AngularJS的基础元素应用

    <!doctype html> <!-- 标记ng-app告诉AngularJS处理整个HTML页并引导应用 --> <html ng-app> <head& ...

  3. asp.net mvc4 简单的服务器监控开发之C#获取服务器CPU、RAM、TCP等系统信息(上)

    一.背景 前段时间服务器出了点问题,加上学业愈来愈紧张,写博文分享的时间越来越少.虽然不是第一次在博客园上写经验,但是近期分享的博文得到了不少的朋友支持和指正,在这里内心非常感激和开心.希望以后能认真 ...

  4. 样式重置 css reset

    新浪的初始化: html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img { ; padding: 0 } fi ...

  5. java学习笔记之泛型

    "泛型"这个术语的意思就是:"使用与许多许多的类型".泛型在编程语言中出现时,其最初的目的是希望类或方法能够具备最广泛的表达能力.如何做到这一点呢,正是通过解耦 ...

  6. flask-- 基础篇

    flask简介: flask是一轻量级的web应用框架,它的实现是一个 wsgi 的微("Micro")框架,当然微("Micro")也不意味这它的功能存在不足 ...

  7. 【BZOJ-3514】Codechef MARCH14 GERALD07加强版 LinkCutTree + 主席树

    3514: Codechef MARCH14 GERALD07加强版 Time Limit: 60 Sec  Memory Limit: 256 MBSubmit: 1288  Solved: 490 ...

  8. &#65279导致页面顶部空白一行解决方法 【】

    2016年11月7日10:57:10 模板文件生成html文件之后会在body开头处加入一个可见的控制符&#65279,导致页面头部会出现一个空白行.原因是页面的编码是UTF-8 + BOM. ...

  9. okhttp封装时,提示 cannot resolve method OkHttpClient setConnectTimeout() 函数

    如标题所示,okhttp封装时,提示 cannot resolve method  OkHttpClient setConnectTimeout() 函数,有遇到这样现象的朋友吗? 原因:因使用的是 ...

  10. ubuntu右上角时间不显示

    重启unity sudo killall unity-panel-service