javascript表單驗證,MVC數據驗證

 2023-10-18 阅读 20 评论 0

摘要:本文導讀:ASP.NET MVC3中的Model是自驗證的,這是通過.NET4的System.ComponentModel.DataAnnotations命名空間完成的。 我們要做的只是給Model類的各屬性加上對應的驗證標記(Attributes)就可以讓MVC3框架幫我們完成驗證。下面介紹MVC中數據驗證的

本文導讀:ASP.NET MVC3中的Model是自驗證的,這是通過.NET4的System.ComponentModel.DataAnnotations命名空間完成的。 我們要做的只是給Model類的各屬性加上對應的驗證標記(Attributes)就可以讓MVC3框架幫我們完成驗證。下面介紹MVC中數據驗證的相關知識

?

javascript表單驗證、一、客戶端驗證

客戶端驗證主要是為了提高用戶體驗,在網頁不回刷的情況下完成驗證。

1、第一步是要在web.config里啟用客戶端驗證,這在MVC3自帶的模板項目中已經有了

vue動態表單校驗,<add key="ClientValidationEnabled" value="true"/>

<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

2、然后在被驗證的View頁面上要加入這樣兩個JavaScript,注意,他們是依賴于JQuery的

數據驗證下拉菜單、<script src="@Url.Content("~/Scripts/jquery.validate.min。js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min。js")" type="text/javascript"></script>

3、驗證消息的顯示有兩種,一種是ValidationSummary,它可以顯示一份驗證消息的匯總,包括從后臺Action里返回的消息

mvc實例?@Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.")

另一種是Model中各屬性對應HTML控件的驗證消息

@Html.ValidationMessageFor(m => m.UserName)

二、Model中加入 驗證標記 進行驗證

1、基礎特性

(1)、Required
必填選項,當提交的表單缺少該值就引發驗證錯誤。

(2)、StringLength
指定允許的長度
指定最大長度:
[StringLength(20)]  //最大長度不超過20個字符

指定最短于最長限制:
[StringLength(20,MinimumLength=3)]  //最大長度不超過20個字符,最短不能低于3個字符

(3)、RegularExpression
正則表達式能夠匹配的字符串,如果不能匹配,則報一個驗證錯誤
[RegularExpression(@"[A-Za-z0-9.%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}")]

(4)、Range

Range特性用來指定數值類型值的最小值和最大值。
[Range(35,44)]??? //整型,最小35,最大44
[Range(typeof(decimal),"0.00","49.99")]??? //decimal類型

(5)、Remote
允許利用服務器端的回調函數執行客戶端的驗證邏輯。說白了就是支持AJAX驗證。
這個寫個異步驗證用戶名是否存在的DEMO:????????????

C# 代碼?? 復制

        [Required][Remote("CheckUserName", "Home")]public string UserName{get;set;}

Controller代碼

C# 代碼?? 復制

        public JsonResult CheckUserName(string UserName){bool result = true;if (UserName == "admin"){result = false;}return Json(result,JsonRequestBehavior.AllowGet);}

顯示結果

(6)、Compare

用于確保模板對象的兩個對象擁有相同的值。
例如,通常輸入密碼之后還要求用戶再次確認密碼,這時候就是Compare屬性發揮作用的時候了。
[Compare("要對比的屬性名")]

2、自定義錯誤提示消息

每個特性都允許傳遞一個帶有自定義錯誤提示消息的參數。

C# 代碼?? 復制

        [Required(ErrorMessage="用戶名必須填寫")][Remote("CheckUserName", "Home",ErrorMessage="此用戶名已存在")]public string UserName{get;set;}

自定義錯誤消息,還有一個格式項,如

C# 代碼?? 復制

[Required(ErrorMessage="{0}必須填寫")]
publit string Name
{get;set;   
}

則{0}在輸入的時候會被Name替換
如果以上的驗證方式還不夠,你還可以自定義驗證

3、顯示和編輯注解

(1)、Display
如果使用的是直接EditorForModel實現的話,Display特性可以幫助你設置友好的顯示名稱
例如:
[Display(Name="密碼")]
public string PassWord { get; set; }

(2)、ScaffoldColumn
隱藏Html輔助方法(如EditorForModel,DisplayForModel)顯示一些屬性。
[ScaffoldColumn(false)]??????? //不顯示該屬性的編輯框
public string UserName { get; set; }

雖然ScaffoldColumn可以做到不顯示一些屬性在頁面上被編輯,但是如果提交的Form有這個屬性值,模型綁定機制依然會綁定此屬性值。要解除就要顯式的[Bind]了,這個與本篇無關。此處不提。

(3)、DisplayFormat
DisplayFormat特性可以用來處理屬性的各種格式化選項。當屬性包含空值時,可以提供可選的顯示文本,也可以為包含標記的屬性關閉HTML編碼,還可以為運行時指定一個應用于屬性值的格式化字符串。
例如:
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:c}")]
public decimal money { get; set; }

這樣,當有初始值的時候,顯示的代碼將所示:

注意是初始值,如果是直接填寫的并不會有符號。來看Controller中設置的初始值:

C# 代碼?? 復制

        public ActionResult PersonAdd(){Person_Model p = new Person_Model();p.money = 12.10M;return View(p);}

此顯示樣式在提交回Controller中是沒用的,因為模型綁定器將不能解析返回的價格值。怎么用自己斟酌,用于顯示還是OK的。

(4)、ReadOnly
如果確保默認的模型綁定器不使用請求中的新值更新屬性,可以給屬性添加ReadOnly特性:
[ReadOnly(true)]
public string Name { get; set; }

注意,此屬性仍然會顯示一個可編輯的文本框來顯示Name,但是模型綁定器不會接收其值,因此只有模型綁定器考慮ReadOnly屬性。

(5)、DataType
DataType特性可以為運行時提供關于屬性的特定用途的信息。
例如:
[DataType(DataType.Password)]
public string PassWord { get; set; }

該屬性可以用于指定多選按鈕,單選按鈕,密碼輸入框,等等類型的數據。

(6)、UIHint
UIHint特性給Asp.net MVC運行時提供了一個模板名字,以備調用模板輔助方法如(DisplayFor和EditorFor)渲染輸出時使用。也可以自定義自己的模板輔助方法來重寫Asp.net MVC的默認行為。

(7)、HiddenInput
HiddentInput在名稱空間System.Web.Mvc中,它可以告知運行時渲染一個type特性值為"hidden"的輸入元素。說白了就是<input type="hidden" value="xxx" />

三、驗證示例

1、首先新建一個MVC項目。添加如下代碼,代碼非常簡單:一個Person_Model類

C# 代碼?? 復制

    public class Person_Model{[Required]public int Id { get; set; }[Required]public string Name { get; set; }[Required]public int Age { get; set; }}

2、Controller類代碼

C# 代碼?? 復制

    public class HomeController : Controller{public ActionResult PersonAdd(){return View();}[HttpPost]public ActionResult PersonAdd(Person_Model model){//一行代碼判斷驗證是否通過if (ModelState.IsValid){return Redirect("/Home/PersonManager");}return View();}}

3、視圖代碼

C# 代碼?? 復制

@model MvcApplication1.Models.Person_Model
@{ViewBag.Title = "Index";Layout = "~/Views/Shared/_Layout。cshtml";
}
<form action="/Home/PersonAdd" method="post">Id:<input type="text" name="Id" value="" />@Html.ValidationMessageFor(Model => Model.Id)  //之所以寫在Person_Model的驗證會顯示到前端提示,主要是這種代碼起的作用
<br />姓名:<input type="text" name="Name" value="" />@Html.ValidationMessageFor(Model => Model.Name)
<br />年齡:<input type="text" name="Age" value="" />@Html.ValidationMessageFor(Model => Model.Age)
<input type="submit" value="確定" />
</form>

4、執行的效果

?

參考資料: http://www.studyofnet.com/news/339.html

轉載于:https://www.cnblogs.com/alqscool/p/6025798.html

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/1/146852.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息