如何實現(xiàn)Asp.Mvc 2.0用戶客戶端驗證

發(fā)布時間：2021-09-28 10:17:46 來源：億速云閱讀：124 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要講解了“如何實現(xiàn)Asp.Mvc 2.0用戶客戶端驗證”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何實現(xiàn)Asp.Mvc 2.0用戶客戶端驗證”吧！

首先咱們看下注冊頁面的驗證效果

以上驗證主要包括
1.用戶名不能為空
2.密碼不能為空，密碼長度不能小于5位數(shù)
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 > 
 
 <%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主要包括規(guī)則rules和提示信息messages兩部分.
例如

rules:
 {
 UserName:
 {
  required:true
 },
}

表示ID為UserName的文本框輸入內(nèi)容不能為空.

messages:
 {
 UserName:
 {
  required:"<span style='color:red'>用&reg;?戶&iexcl;ì名?不?能¨&sup1;為a空?! </span>"
 },

表示ID為UserName的文本框內(nèi)容如果為空的話，給出提示信息.

感謝各位的閱讀，以上就是“如何實現(xiàn)Asp.Mvc 2.0用戶客戶端驗證”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對如何實現(xiàn)Asp.Mvc 2.0用戶客戶端驗證這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

向AI問一下細節(jié)

如何實現(xiàn)Asp.Mvc 2.0用戶客戶端驗證

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽