Validation을 하면서 에러메시지를 다국어 처리했어야 했는데 굳이 라이브러리를 쓰지 않아도 될 것 같아서 간단히 함수와 메시지 파일을 만들어 처리했다.
locale 정보 가져오기
기존 서버 코드가 쿠키에 locale 정보를 저장하게 되어 있어서 getLocale 함수를 생성해서 값을 가져온다.
validation.js
function getLocale() {
var lang = 'ko';
var cookies = document.cookie;
var splitCookies = [];
if (cookies) {
splitCookies = cookies.split('=');
lang = splitCookies[1]
}
return lang;
}- default 값은 'ko'로 설정한다.
- document.cookie는 name=value 쌍으로 구성되어 있고, 각 쌍은 ';'로 구분한다.
- 쿠키 정보가 여러 개이면 ';'를 기준으로 값을 분리해서 원하는 쿠키를 찾으면 되지만 위의 코드에서는 쿠키에 locale 정보만 있기 때문에 '='를 기준으로 분리해서 값을 가져오게 했다.
validation.messages.js
function getMessage(lang, key) {
if(lang === 'ko') {
return messages_ko[key];
} else if(lang === 'en') {
return messages_en[key];
}
}
var messages_ko = {
"userId.rangelength":'5글자에서 10글자 내로 입력해 주세요.',
"userId.regex":'첫 글자 영문을 포함하여 영문 대소문자/숫자로 입력해 주세요.'
}
var messages_en = {
"userId.rangelength": 'Please enter a value between 5 and 30 characters long.',
"userId.regex":'Example example'
}- getMassage(lang, key) 함수로 locale 정보와 key 입력 값을 받아와서 각각에 맞는 value 값을 찾아서 return 해준다.
- 처음에는 var map = new Map()에 key, value를 추가했었는데 IE는 지원하지 않아서 위의 코드와 같이 변경했다.
join.html
<head>
<script th:src="@{/js/validation.messages.js}"></script>
</head>
validation.js
function i18n(value) {
var lang = getLocale();
var message = getMessage(lang, value);
return message;
}getLocale()로 locale 정보를 가져온 후 message.js 파일에 생성했던 함수로 message를 가져올 수 있게 한다.
적용 코드
$(document).ready(function () {
$('#signup-form').validate({
rules: { ... },
messages: {
userId: {
rangelength: i18n('userId.rangelength'),
regex: i18n('userId.regex')
},
...
}
});
});
적용 화면(ko/en)
'JavaScript' 카테고리의 다른 글
| sweetalert2 메시지 줄 바꿈(개행) (0) | 2022.03.11 |
|---|---|
| element-tiptap Editor (0) | 2022.03.02 |
| jQuery validation plugin(Form validation 사용법) (4) | 2021.11.19 |
| 자바스크립트 정규표현식(Regular expressions) (0) | 2021.11.16 |