今天給大家講解下ASP.NET mvc的用戶端驗證.通常情況下，我們在頁面中對輸入的內容多要進行用戶端驗證，用戶端驗證一般使用JS進行，這裡咱們講解下使用jquery.validate外掛程式進行用戶端驗證。
首先咱們看下註冊頁面的驗證效果
以上驗證主要包括
1.使用者名稱不可為空
2.密碼不可為空，密碼長度不能小於5位元
3.確認密碼不可為空，確認密碼長度不能小於5位，確認密碼必須和密碼文字框輸入的一致
4.郵箱格式必須正確。
以下是使用jquery.validate外掛程式進行驗證的代碼
[html]<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MvcLogin.Models.RegisterModel>" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>註冊頁面</title> <script type="text/javascript" src="../../Scripts/jquery-1.4.1-vsdoc.js"></script> <script type="text/javascript" src="../../Scripts/jquery.validate.js"></script> <script type="text/javascript"> $().ready(function () { $("#form1").validate( { rules: { UserName: { required: true }, UserPwd: { required: true, minlength: 6 }, ConfirPwd: { required: true, minlength: 6, equalTo: "#UserPwd" }, Email: { email: true } }, messages: { UserName: { required: "<span style='color:red'>使用者名稱不可為空! </span>" }, UserPwd: { required: "<span style='color:red'>密碼不可為空!</span>", minlength: jQuery.format("<span style='color:red'>密碼長度不能小於{0}個字元!</span>") }, ConfirPwd: { required: "<span style='color:red'>確認密碼不可為空!<span>", minlength: jQuery.format("確認密碼長度不能小於{0}個字元!"), equalTo: "<span style='color:red'>兩次輸入密碼不一致!</span>" }, Email: { email: "<span style='color:red'>郵箱輸入格式不正確!</span>" } }, onkeyup: false }); }); </script> </head> <body> <div> <br /> <p style="font-size:12px;color:red"> <%if (ViewData["msg"] != null) {%> <%:ViewData["msg"]%> <%} %> </p> <br /> <%Html.BeginForm("Register", "user", FormMethod.Post, new { name="form1",id="form1"}) ; %> <table> <tr> <td><%: Html.LabelFor(m => m.UserName) %></td> <td> <%: Html.TextBoxFor(m => m.UserName) %></td> </tr> <tr> <td> <%: Html.LabelFor(m => m.UserPwd) %></td> <td> <%: Html.PasswordFor(m => m.UserPwd) %></td> </tr> <tr> <td> <%: Html.LabelFor(m => m.ConfirPwd) %></td> <td> <%: Html.PasswordFor(m => m.ConfirPwd)%></td> </tr> <tr> <td> <%: Html.LabelFor(m => m.Email) %></td> <td> <%: Html.TextBoxFor(m => m.Email) %></td> </tr> <tr> <td> <input type=submit value="提交" /></td> <td></td> </tr> </table> <%Html.EndForm(); %> </div> </body> </html>
$("#form1").validate主要包括規則rules和提示資訊messages兩部分.
例如
rules: { UserName: { required:true },}
表示ID為UserName的文字框輸入內容不可為空.
messages: { UserName: { required:"<span style='color:red'>用®?戶¡ì名?不?能¨¹為a空?! </span>" },
表示ID為UserName的文字框內容如果為空白的話，給出提示資訊.
以上就是使用jquery.validate外掛程式進行用戶端驗證的全部過程，希望對大家的學習有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
