我目前有以下表單,Select部分因為必須上一層有選擇下層才有資料,因此使用jQuery驗證問題類型是否有選擇就好,而問題描述要驗證是否為空,這裡採用MVC內建的DataAnnotations來驗證。

1.View(HTML)

視圖顯示的布局如下

 <h2>維修申請單</h2>

 <form id="RepairForm">
<p> @Html.Label("dept", "申請部門")
<select class="DropDownList" id="dept" name="dept"></select>
<br /> @Html.Label("deviceType", "設備類型")
<select class="DropDownList" id="deviceType" name="deviceType"></select>
<br /> @Html.Label("deviceId", "設備編號")
<select class="DropDownList" id="deviceId" name="deviceId"></select><text id="deviceDesc" style="color:red"></text>
<br /> @Html.Label("problemType", "問題類型")
<select class="DropDownList" id="problemType" name="problemType"></select>
<br /> @Html.Label("problemDesc", "問題描述")
@Html.TextArea("problemDesc")
<br /> </p> <input type="submit" value="提出申請" />
</form>

View(HTML) Code

2.View(jQuery)

jQuery提交表單的程式碼如下

 $("#RepairForm").submit(
function () {
$(".DropDownList").attr("disabled", false); //提交前把控件開啟才能提交
if (problemType.value == "Value") {
alert("Hey,你資料沒填完整!!");
location.reload(); //資料寫錯就重新整理重填
return false;
}
$.post("/Repair/PostData", //接收提交的Action
$("#RepairForm").serialize(), //提交
function (result) {
if (result.msg == "Error") {
alert("Hey,你資料沒填完整!!");
location.reload(); //資料寫錯就重新整理重填
} else {
alert(result.msg); //Show出申請單號
}
},
"json" //接收由Controller返回的資料類型
);
return false; //避免讓ASP.NET處理Submit
});

View(jQuery) Code

3.Controller

         [HttpPost]
public JsonResult PostData(RepairForm form)
{
JData data = new JData();
if (ModelState.IsValid) //如果驗證成功
{
data.msg = this.GetSerial(); //取得序號
//Do something...例如存入DB return Json(data);
}
data.msg = "Error"; //驗證失敗返回"Error"
return Json(data);
} //JSON數據模型
public class JData
{
public string msg { get; set; }
}

Controller

4.Model(重要:主要是模型這裡在驗證的)

請記得引用System.ComponentModel.DataAnnotations才能啟用驗證功能哦!

     public class RepairForm
{
//這裡把RepairForm裡的元素一一對上
[Required]
public String dept { get; set; }
[Required]
public String deviceType { get; set; }
[Required]
public String deviceId { get; set; }
[Required]
public String problemType { get; set; }
[Required]
public String problemDesc { get; set; }
}

執行結果:

1.Select沒全部選完<由jQuery擋住>

2.TextArea空白<由DataAnnotations驗證後返回>

3.全部填完

[MVC4-基礎] 使用DataAnnotations+jQuery進行表單驗證的更多相关文章

  1. HTML 4.01+5基礎知識

    HTML 4.01+5 1.Html結構:html>head+body 2.Html快捷鍵:!加Tab(在sublime中) 3.雙標籤: ①常用標籤 h1.h2.h3.h4.h5.h6 p.c ...

  2. [心得] 如何利用liquibase進行資料庫版本控制 - 基礎觀念

    前言 - 會寫這篇除了是要記錄一下使用的過程之外,也是發現到網路上找來的教學幾乎都是跟其它環境做結合 比較沒有單純利用command進行的流程.也沒有整體觀念的介紹,所以將我所理解的整理分享給大家. ...

  3. jQuery基礎知識

    jQuery基礎知識 $(function(){}) //jQuery先執行一遍再執行其他函數 $(document).ready(fn) //文檔加載完後觸發 1. 刪除$:jQuery.noCon ...

  4. BootStrap基礎知識

    BootStrap基礎知識 1. .lead //突出 .text-left //文字居左 .text-right //文字居右 .text-center //文字居中 .text-justify / ...

  5. Python 基礎 - if else流程判斷

    hmm~前面講了那麼多,終於可以稍稍的正式進入另一個階段,沒錯,要開始寫判斷式了 這次先從最簡單的判斷式開始,if else 開始- Go 首先,之前有寫有一個簡單的互動式 用戶輸入 的代碼,忘記了嗎 ...

  6. GO語言基礎教程:序章

    首先自我介紹一下我自己,我是一個coder,目前主要從事B/S程序開發工作,懂點PHP;ASP;JSP;JS;VB;C;DELPHI;JAVA,另外知道幾個數據庫,除此之外別無所長,那麼我為何會選擇學 ...

  7. JavaScript基礎知識

    JavaScript基礎知識 1.標籤組使用 <script charset='utf-8' //設置字元集 defet //使腳本延遲到文檔解析完成,Browser已忽略 language=' ...

  8. CSS1-3基礎知識

    CSS1-3基礎知識 1.css排版 css在html內排版: <style type='text/css'> 標記名{} .類型名{} #ID名{} 標記名,.類型名,#ID名{} &l ...

  9. Python 基礎 - 字符編碼

    Python 解釋器在加載 .py 文件中的代碼時,會對內容進行編碼 (默認 ascill) ASCII (American Standard Code for Information Interch ...

随机推荐

  1. Resizable(调整大小)组件

    一.加载方式 //class 加载方式 <div id="rr" class="easyui-resizable" data-options=" ...

  2. TravelCMS旅游网站系统前台诞生记-2(后台框架篇)

    经过一个多月的研发,前台页面已基本成型了,已开发了线路和签证两大模块,支持在线支付,微信支付待开发,在这个过程中,发现前端技术远比后台技术注重的细节多,特别是css,比我想象的要难,为了兼容各种浏览器 ...

  3. 常用webservice网址

    http://www.gpsso.com/Main/ServiceList.aspx http://developer.51cto.com/art/200908/147125.htm 这里记录了几个常 ...

  4. DG下手工处理v$archive_gap方法

    从9i以后,oracle dataguard 备库一般都不需要手工处理丢失的日志,FAL自动会帮我们处理,下面通过个案例来讲下手工处理丢失的日志的方法: 1.在备库查询有哪些日志丢失,没应用到备库 S ...

  5. UIButton上图片和文字的位置调整

    UIButton 上默认是图片在左文字在右,而大多数情况这样默认的的显示形式都不能满足我们的需求,接下来我就这个问题分享一下我的心得. 默认情况下,不设置的效果,都是居中实现 UIButton *bu ...

  6. 启动外部exe程序

    Process myProcess = new Process();myProcess.StartInfo.FileName = pathName;myProcess.Start();其中的pathN ...

  7. ST表入门学习poj3264 hdu5443 hdu5289 codeforces round #361 div2D

    ST算法介绍:[转自http://blog.csdn.net/insistgogo/article/details/9929103] 作用:ST算法是用来求解给定区间RMQ的最值,本文以最小值为例 方 ...

  8. jQuery自学笔记(三):jQuery动画效果

    jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector ...

  9. C#使用log4net

    C#很多异步机制使程序无法使用断点调试,这时候我们就需要使用日志输出.使用log4net一定要先引用net4log这个dll,不然无法使用. 作者很懒,直接上代码吧. using System; us ...

  10. jQuery1.9(辅助函数)学习之——.serialize();

    $("form").serialize();  返回一个String 描述: 将用作提交的表单元素的值编译成字符串,这个方法不接受任何参数. .serialize(); 方法使用标 ...