xVal의 두번째 시간입니다..
이전 글에 소개했던 사이트들은 다 댕겨와 보셨겠지요..?
이제 설치 법을 알아 보도록 하겠습니다.
먼저 xVal.dll 을 첨부 하시고
스크립트에서 jquery 최신버전, jquery.validate.js가 미리 포함되어 있어야 하고..xVal.jquery.validate.js 가 필요합니다.
결론적으로는 xVal.dll과 xVal.jquery.validate.js 가 필요한것이죠.
[Model]
모델에서는 유효성 검사를 하기 위한 어트리뷰트를 표현합니다.
[SamePasswordAttirbute(FirstPropertyName = "Password", SecondPropertyName = "ConfirmPassword", ErrorMessage = "비밀번호와 비밀번호 확인의 값이 다릅니다.")]
public class Register
{
[Required(ErrorMessage = "사용자 아이디를 입력하여 주십시오.")]
[MaxMinStringLength(16, 4, ErrorMessage = "사용자 아이디의 글자수는 {0}보다 크고 {1}보다 작아야 합니다.")]
[AlphaNumeric(IsAllowedFirstDigit = false, ErrorMessage = "사용자 아이디는 영문자 혹은 숫자로만 구성되어야 하며 첫 글자는 영문자여야 합니다.")]
[DisplayName("사용자 아이디")]
public string UserName { get; set; }
}
위 예제에서 클래스에 설정된 특성과 메서드에 설정된 특성을 볼 수 있습니다.
DisplayName 이라는 특성을 제외하고는 모두 유효성 검증 특성이 되겠습니다.
System.ComponentModel.DataAnnotations 라는 네임스페이스를 using 해주어야 하며 사용자 정의 특성도 있습니다.
사용자 정의 특성에 대해서는 다음 글에서 알아 보도록 하겠습니다.
[Controller]
컨트롤러에서는 유효성 검증 여부를 판단하는 코드가 들어 갑니다.
public ActionResult Register(Register model)
{
if (this.ModelState.IsValid)
{
if (CaptchaHelper.VerifyAndExpireSolution(this.HttpContext, model.Captcha, model.Attempt)
{
//Other Actoin........
}
else
{
this.ModelState.AddModelError("authmessage", "캡챠의 텍스트가 다릅니다.");
}
}
return this.CreateJson(false, model, "Error");
}
3행의 ModelState.IsValid 라는 속성이 그러한 예입니다.
이는 서버측의 유효성 검사가 되겠습니다.
코드 상에 추가로 유효성 검사를 하게 되는 경우 예외가 발생된다면 11행 처럼 ModelState.AddModelError 메서드로 예외 내용을 추가 하면 됩니다.
그리고 ActionResult를 리턴합니다.
[View]
이제 서버쪽의 유효성 검사는 되었습니다.남은건 클라이언트 영역의 유효성 검사가 남았군요.
클라이언트의 유효성 검사를 하기 위해서는 단 한줄의 코드가 필요합니다.
<%= this.Html.ClientSideValidation<Register>().UseValidationSummary("errorSummary")%>
ClientSideValidation메서드는 클라이언트측 유효성 검사를 하기위한 필수 메서드입니다. Register 라는 Model 에 대한 유효성 검사를 한다는 의미가 되겠습니다.
UseValidationSummary() 메서드는 이 유효성 검사의 예외 결과를 errorSummary 라는 개체의 innerHtml로 서머리를 하겠다는 의미입니다.
이 메서드를 생략하게 되면 이 사이트의 회원가입폼 처럼 유효성 검사 결과가 해당 컨트롤의 바로 옆에 출력이 되게 됩니다.
그에 반해 이 메서드를 사용하게 되면 errorSummary(보통 div가 되겠지요.)에 메시지를 뿌려주게 되지요..
<div id="errorSummary" style="display: none; z-index: 999;">
<%= this.Html.ValidationSummary() %>
</div>
이런 식으로 선언을 하면 됩니다.
이렇게 설정을 하면 준비가 다 된것이죠.
이렇게 만들어진 페이지에서 소스보기를 하시면..
xVal.AttachValidator(null, {"Fields":[{"FieldName":"UserName","FieldRules":[{"RuleName":"Required","RuleParameters":{},"Message":"사용자 아이디를 입력하여 주십시오."},{"RuleName":"Custom","RuleParameters":{"Function":"validateAlphaNumeric","Parameters":"{\"IsAllowedFirstDigit\":false,\"MinRequiredAlphaCharacters\":0,\"MinRequiredNumericCharacters\":0}"},"Message":"사용자 아이디는 영문자 혹은 숫자로만 구성되어야 하며 첫 글자는 영문자여야 합니다."},{"RuleName":"Custom","RuleParameters":{"Function":"validateMaxMinStringLength","Parameters":"{\"MinLength\":4,\"MaxLength\":16}"},"Message":"사용자 아이디의 글자수는 4보다 크고 16보다 작아야 합니다."}]},{"FieldName":"RealName","FieldRules":[{"RuleName":"Required","RuleParameters":{},"Message":"이름을 입력하여 주십시오."}]},{"FieldName":"Email","FieldRules":[{"RuleName":"DataType","RuleParameters":{"Type":"EmailAddress"},"Message":"유효한 전자메일 주소 형식이 아닙니다."},{"RuleName":"Required","RuleParameters":{},"Message":"전자메일 주소를 입력하여 주십시오."}]},{"FieldName":"Password","FieldRules":[{"RuleName":"Required","RuleParameters":{},"Message":"비밀번호를 입력하여 주십시오."},{"RuleName":"Custom","RuleParameters":{"Function":"validateMaxMinStringLength","Parameters":"{\"MinLength\":4,\"MaxLength\":16}"},"Message":"비밀번호의 글자수는 4보다 크고 16보다 작아야 합니다."}]},{"FieldName":"ConfirmPassword","FieldRules":[{"RuleName":"Required","RuleParameters":{},"Message":"비밀번호 확인을 입력하여 주십시오."},{"RuleName":"Custom","RuleParameters":{"Function":"validateMaxMinStringLength","Parameters":"{\"MinLength\":4,\"MaxLength\":16}"},"Message":"비밀번호의 글자수는 4보다 크고 16보다 작아야 합니다."},{"RuleName":"Custom","RuleParameters":{"Function":"validateSamePassword","Parameters":"{\"FirstPropertyName\":\"Password\",\"SecondPropertyName\":\"ConfirmPassword\"}"},"Message":"비밀번호와 비밀번호 확인의 값이 다릅니다."}]},{"FieldName":"PasswordQuestion","FieldRules":[{"RuleName":"Required","RuleParameters":{},"Message":"비밀번호 찾기의 질문을 입력하여 주십시오."}]},{"FieldName":"PasswordAnswer","FieldRules":[{"RuleName":"Required","RuleParameters":{},"Message":"비밀번호 찾기의 대답을 입력하여 주십시오."},{"RuleName":"Custom","RuleParameters":{"Function":"validateMaxMinStringLength","Parameters":"{\"MinLength\":4,\"MaxLength\":16}"},"Message":"비밀번호 찾기 질문의 대답의 글자수는 4보다 크고 16보다 작아야 합니다."}]},{"FieldName":"UserSite","FieldRules":[{"RuleName":"RegEx","RuleParameters":{"Pattern":"(http|ftp|https):\\/\\/[\\w\\-_]+(\\.[\\w\\-_]+)+([\\w\\-\\.,@?^=%&:/~\\+#]*[\\w\\-\\@?^=%&/~\\+#])?","Options":"i"},"Message":"유효한 도메인 형식이 아닙니다."}]},{"FieldName":"Attempt","FieldRules":[{"RuleName":"Required","RuleParameters":{},"Message":"캡챠를 보고 올바른 텍스트를 입력하여 주십시오."}]}]}, {})
이런 코드가 생성되어 있습니다.
이는 xVal.jquery.validate.js 에 있는 메서드가 되겠습니다. 이 코드를 읽어서 클라이언트측 유효성 검사를 하게 되는 것이죠.
이로써 간단한 적용법을 알아 보았습니다.
다음글에서는 사용자 정의 특성을 만들어 보도록 하겠습니다.
