Asp.Mvc 2.0 사용자 클 라 이언 트 검증 실례 설명(3)

오늘 여러분 께 ASP.NET mvc 의 클 라 이언 트 검증 을 설명해 드 리 겠 습 니 다.일반적인 상황 에서 저 희 는 페이지 에서 입력 한 내용 에 대해 클 라 이언 트 검증 을 해 야 합 니 다.클 라 이언 트 검증 은 보통 JS 를 사용 합 니 다.여기 서 jquery.vaidate 플러그 인 을 사용 하여 클 라 이언 트 검증 을 해 야 합 니 다.
우선 등록 페이지 의 검증 효 과 를 살 펴 보 자.

이상 검증 은 주로
1.사용자 이름 이 비어 있 으 면 안 됩 니 다.
2.비밀 번 호 는 비어 있 으 면 안 되 고,비밀 번 호 는 5 자리 보다 작 으 면 안 됩 니 다.
3.비밀번호 가 비어 있 으 면 안 되 고,비밀번호 길이 가 5 자리 보다 작 으 면 안 되 며,비밀 번 호 를 확인 하려 면 비밀번호 텍스트 상자 입력 과 일치 해 야 합 니 다.
4.메 일 형식 이 정확 해 야 합 니 다.
다음은 jquery.vaidate 플러그 인 을 사용 하여 검증 한 코드 입 니 다.


[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>

$("\#form 1").vaidate 는 규칙 rules 와 알림 정보 messages 두 부분 을 포함 합 니 다.
예컨대

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

ID 가 UserName 임 을 나타 내 는 텍스트 상자 의 입력 내용 이 비어 있 으 면 안 됩 니 다.


messages:
 {
 UserName:
 {
  required:"<span style='color:red'> ®? ¡ì ? ? ¨¹ a ?! </span>"
 },

ID 가 UserName 임 을 나타 내 는 텍스트 상자 의 내용 이 비어 있 으 면 알림 메 시 지 를 보 냅 니 다.
이상 은 jquery.vaidate 플러그 인 을 사용 하여 클 라 이언 트 검증 을 하 는 모든 과정 입 니 다.여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Asp.Mvc 2.0 사용자 로그 인 및 로그아웃 기능 인 스 턴 스 설명 실현(2)

이 절 은 ASP.MVC 2.0 의 사용자 로그 인과 로그아웃 기능 을 설명 하고 로그 인 을 먼저 말 한 다음 에 로그아웃 을 말한다.우리 시리즈 에서 말 하 는 사용자 로그 인 방식 은 모두 FORM 폼 검증 방...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Asp.Mvc 2.0 사용자 클 라 이언 트 검증 실례 설명(3)

좋은 웹페이지 즐겨찾기