熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> .NET編程 >> 正文

Asp.Mvc 2.0用戶登錄實例講解:客戶端驗證

2013-11-13 09:47:49  來源: .NET編程 

  今天給大家講解下ASPNET mvc的客戶端驗證通常情況下我們在頁面中對輸入的內容多要進行客戶端驗證客戶端驗證一般使用JS進行這裡咱們講解下使用jqueryvalidate插件進行客戶端驗證

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

  

  以上驗證主要包括

  用戶名不能為空

  密碼不能為空密碼長度不能小於位數

  確認密碼不能為空確認密碼長度不能小於確認密碼必須和密碼文本框輸入的一致

  郵箱格式必須正確

  以下是使用jqueryvalidate插件進行驗證的代碼

  <%@ Page Language=C# Inherits=SystemWebMvcViewPage<MvcLoginModelsRegisterModel> %> <!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN transitionaldtd> <html xmlns= > <head runat=server> <title>注冊頁面</title> <script type=text/javascript src=//Scripts/jqueryvsdocjs></script> <script type=text/javascript src=//Scripts/jqueryvalidatejs></script> <script type=text/javascript> $()ready(function () { $(#form)validate( { rules: { UserName: { required: true } UserPwd: { required: true minlength: } ConfirPwd: { required: true minlength: equalTo: #UserPwd } Email: { email: true } } messages: { UserName: { required: <span style=color:red>用戶名不能為空! </span> } UserPwd: { required: <span style=color:red>密碼不能為空!</span> minlength: jQueryformat(<span style=color:red>密碼長度不能小於{}個字符!</span>) } ConfirPwd: { required: <span style=color:red>確認密碼不能為空!<span> minlength: jQueryformat(確認密碼長度不能小於{}個字符!) 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 /> <%HtmlBeginForm(Register user FormMethodPost new { name=formid=form}) ; %> <table> <tr> <td><%: HtmlLabelFor(m => mUserName) %></td> <td> <%: HtmlTextBoxFor(m => mUserName) %></td> </tr> <tr> <td> <%: HtmlLabelFor(m => mUserPwd) %></td> <td> <%: HtmlPasswordFor(m => mUserPwd) %></td> </tr> <tr> <td> <%: HtmlLabelFor(m => mConfirPwd) %></td> <td> <%: HtmlPasswordFor(m => mConfirPwd)%></td> </tr> <tr> <td> <%: HtmlLabelFor(m => mEmail) %></td> <td> <%: HtmlTextBoxFor(m => mEmail) %></td> </tr> <tr> <td> <input type=submit value=提交 /></td> <td></td> </tr> </table> <%HtmlEndForm(); %> </div> </body> </html>

  $(#form)validate主要包括規則rules和提示信息messages兩部分

  例如

  rules:

  {

  UserName:

  {

  required:true

  }

  }

  表示ID為UserName的文本框輸入內容不能為空

  messages:

  {

  UserName:

  {

  required:<span style=color:red>用??戶?ì名?不?能¨為a空?! </span>

  }

  表示ID為UserName的文本框內容如果為空的話給出提示信息

  onkeyup: 參數表示是否在按下鍵時執行驗證


From:http://tw.wingwit.com/Article/program/net/201311/11605.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.