유효성 검사기
validatorjs 라이브러리는 브라우저와 Node.js 모두에서 JavaScript의 데이터 유효성 검사를 매우 쉽게 만듭니다. 이 라이브러리는 Laravel 프레임워크의 Validator 에서 영감을 받았습니다 .
validatorjs를 사용하는 이유는 무엇입니까?
- 어떤 라이브러리에도 의존하지 않습니다.
- 브라우저와 노드 모두에서 작동합니다.
- 읽기 가능하고 선언적인 유효성 검사 규칙.
- 다국어 지원 오류 메시지.
- AMD/Require.js 및 CommonJS/Browserify 지원.
설치
Bower, NPM 또는 Github의 /dist 디렉터리에서 validatorjs를 가져옵니다.
1bower install validatorjs
1npm install validatorjs
Browser
1<script src="validator.js"></script>
Node.js / Browserify
1let Validator = require('validatorjs');
Basic Usage
1let validation = new Validator(data, rules [, customErrorMessages]);
data {Object} - 유효성을 검사하려는 데이터
rules {Object} - 유효성 검사 규칙
customErrorMessages {Object} - 반환할 선택적 사용자 지정 오류 메시지
예 1 - 유효성 검사 통과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16let data = {
name: 'John',
email: 'johndoe@gmail.com',
age: 28
};
let rules = {
name: 'required',
email: 'required|email',
age: 'min:18'
};
let validation = new Validator(data, rules);
validation.passes(); // true
validation.fails(); // false
유효성 검사 규칙을 데이터 개체에 적용하려면 규칙 개체에 대해 동일한 개체 키 이름을 사용 합니다.
예 2 - 검증 실패
1
2
3
4
5
6
7
8
9
10
11
12
13
14let validation = new Validator({
name: 'D',
email: 'not an email address.com'
}, {
name: 'size:3',
email: 'required|email'
});
validation.fails(); // true
validation.passes(); // false
// Error messages
validation.errors.first('email'); // 'The email format is invalid.'
validation.errors.get('email'); // returns an array of all email error messages
Nested Rules
중첩 객체도 검증할 수 있습니다. 중첩 객체에 대한 검증 규칙을 선언하는 방법에는 두 가지가 있습니다. 첫 번째 방법은 데이터를 반영하는 해당 중첩 객체 구조로 검증 규칙을 선언하는 것입니다. 두 번째 방법은 평평한 키로 검증 규칙을 선언하는 것입니다. 예를 들어, 다음 데이터를 검증하려면:
1
2
3
4
5
6
7
8
9
10let data = {
name: 'John',
bio: {
age: 28,
education: {
primary: 'Elementary School',
secondary: 'Secondary School'
}
}
};
유효성 검사 규칙을 다음과 같이 선언할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19let nested = {
name: 'required',
bio: {
age: 'min:18',
education: {
primary: 'string',
secondary: 'string'
}
}
};
// OR
let flattened = {
'name': 'required',
'bio.age': 'min:18'
'bio.education.primary': 'string',
'bio.education.secondary': 'string'
};
WildCards Rules
와일드카드도 확인할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12let data = {
users: [{
name: 'John',
bio: {
age: 28,
education: {
primary: 'Elementary School',
secondary: 'Secondary School'
}
}
}]
};
유효성 검사 규칙을 다음과 같이 선언할 수 있습니다.
1
2
3
4
5
6let rules = {
'users.*.name': 'required',
'users.*.bio.age': 'min:18'
'users.*.bio.education.primary': 'string',
'users.*.bio.education.secondary': 'string'
};
Available Rules
유효성 검사 규칙에는 암시적 '필수'가 없습니다. 필드가 정의되지 않았 거나 빈 문자열인 경우 유효성 검사를 통과합니다. 정의되지 않음 또는 ''에 대해 유효성 검사가 실패하도록 하려면 필수 규칙을 사용하세요.
허용
유효성 검사 필드는 yes, on, 1 또는 true여야 합니다. 이는 "서비스 약관" 수락을 확인하는 데 유용합니다.
이후: 날짜
유효성 검사 중인 필드는 지정된 날짜 이후여야 합니다.
after_or_equal: 날짜
필드 unter 유효성 검사는 지정된 필드 이후여야 합니다.
알파
검증 대상 필드는 완전히 영문자여야 합니다.
alpha_dash
유효성 검사 중인 필드에는 영숫자 문자와 대시 및 밑줄이 포함될 수 있습니다.
alpha_num
검증 대상 필드는 완전히 영숫자 문자여야 합니다.
정렬
검증 대상 필드는 배열이어야 합니다.
이전: 날짜
유효성 검사 중인 필드는 지정된 날짜 이전이어야 합니다.
before_or_equal: 날짜
유효성 검사 중인 필드는 지정된 날짜 이전이거나 같아야 합니다.
사이: 최소, 최대
유효성 검사 중인 필드의 크기는 지정된 최소값과 최대값 사이여야 합니다. 문자열, 숫자 및 파일은 크기 규칙과 동일한 방식으로 평가됩니다.
부울
true
검증 중인 필드는 , false
, 0
, 1
, 'true'
, , 'false'
, '0'
, '1'
형식 의 부울 값이어야 합니다.
확인
유효성 검사 필드에는 일치하는 foo_confirmation 필드가 있어야 합니다. 예를 들어 유효성 검사 필드가 비밀번호인 경우 일치하는 password_confirmation 필드가 입력에 있어야 합니다.
날짜
Date
유효성 검사 중인 필드는 Javascript 개체 에서 허용되는 유효한 날짜 형식이어야 합니다 .
숫자: 값
유효성 검사 중인 필드는 숫자여야 하며 값의 길이가 정확해야 합니다.
다름: 속성
제공된 필드는 유효성 검사 중인 필드와 달라야 합니다.
이메일
유효성 검사 필드는 전자 메일 주소 형식이어야 합니다.
마녀
확인 중인 필드는 16진수 형식이어야 합니다. 16 hex|size:6
진수 색상 코드 확인과 같은 다른 규칙과 함께 사용하면 유용합니다.
in: 푸, 바,...
검증 중인 필드는 지정된 값 목록에 포함되어야 합니다. 필드는 배열 또는 문자열일 수 있습니다.
정수
유효성 검사 중인 필드에는 정수 값이 있어야 합니다.
최대: 값
속성이 주어진 크기보다 크지 않은지 확인
참고: 최대 검사가 포함됩니다.
최소: 값
속성이 지정된 크기 이상인지 확인합니다.
참고: 최소 검사가 포함됩니다.
not_in: 푸, 바,...
유효성 검사 중인 필드는 지정된 값 목록에 포함되지 않아야 합니다.
숫자
속성이 숫자인지 확인합니다. 숫자의 문자열 표현이 통과됩니다.
필수의
값의 문자열 표현 길이가 >인지 확인합니다.
required_if:다른 필드, 값
검증 중인 필드가 있어야 하며 anotherfield 필드가 어떤 값과도 같으면 비어 있지 않아야 합니다.
required_unless: 다른 필드, 값
유효성 검사 중인 필드가 있어야 하며 anotherfield 필드가 어떤 값과도 같지 않는 한 비어 있지 않아야 합니다.
required_with:foo,바,...
유효성 검사 중인 필드가 있어야 하며 지정된 다른 필드가 있는 경우에만 비어 있으면 안 됩니다.
required_with_all:foo,바,...
유효성 검사 중인 필드가 있어야 하며 지정된 다른 모든 필드가 있는 경우에만 비어 있으면 안 됩니다.
required_without: foo,bar,...
유효성 검사 중인 필드가 있어야 하며 지정된 다른 필드가 없는 경우에만 비어 있으면 안 됩니다.
required_without_all: foo,bar,...
유효성 검사 중인 필드가 있어야 하며 지정된 다른 필드가 모두 없는 경우에만 비어 있으면 안 됩니다.
동일:속성
주어진 필드는 검증 중인 필드와 일치해야 합니다.
크기: 값
유효성 검사 대상 필드는 주어진 값과 일치하는 크기를 가져야 합니다. 문자열 데이터의 경우 값은 문자 수에 해당하고 숫자 데이터의 경우 값은 주어진 정수 값에 해당합니다.
끈
검증 대상 필드는 문자열이어야 합니다.
URL
속성에 유효한 URL 형식이 있는지 확인
정규식: 패턴
유효성 검사 중인 필드는 지정된 정규식과 일치해야 합니다.
참고 : 패턴을 사용할 때 regex
특히 정규식에 파이프 문자가 포함된 경우 파이프 구분 기호를 사용하는 대신 배열에 규칙을 지정해야 할 수 있습니다. 정규식 패턴에서 사용한 각 백슬래시마다 이스케이프 처리해야 합니다. 다른 백 슬래시로.
예 3 - 정규식 유효성 검사
1
2
3
4
5
6
7
8
9
10
11
12
13let validation = new Validator({
name: 'Doe',
salary: '10,000.00',
yearOfBirth: '1980'
}, {
name: 'required|size:3',
salary: ['required', 'regex:/^(?!0\\.00)\\d{1,3}(,\\d{3})*(\\.\\d\\d)?$/'],
yearOfBirth: ['required', 'regex:/^(19|20)[\\d]{2,2}$/']
});
validation.fails(); // false
validation.passes(); // true
예 4 - 유형 검사 유효성 검사
1
2
3
4
5
6
7
8
9
10
11let validation = new Validator({
age: 30,
name: ''
}, {
age: ['required', { 'in': [29, 30] }],
name: [{ required_if: ['age', 30] }]
});
validation.fails(); // true
validation.passes(); // false
Register Custom Validation Rules
1Validator.register(name, callbackFn, errorMessage);
name {String} - 규칙의 이름입니다.
callbackFn {Function} - 유효성 검사 성공 또는 실패를 나타내는 부울을 반환합니다.
errorMessage {String} - 사용자 지정 오류 메시지를 지정할 수 있는 선택적 문자열입니다. errorMessage 내의 속성은 속성 이름으로 대체됩니다 .
1
2
3Validator.register('telephone', function(value, requirement, attribute) { // requirement parameter defaults to null
return value.match(/^\d{3}-\d{3}-\d{4}$/);
}, 'The :attribute phone number is not in the format XXX-XXX-XXXX.');
Asynchronous Validation
passes
콜백 을 수락하는 비동기 규칙을 등록합니다 .
1
2
3
4
5
6Validator.registerAsync('username_available', function(username, attribute, req, passes) {
// do your database/api checks here etc
// then call the `passes` method where appropriate:
passes(); // if username is available
passes(false, 'Username has already been taken.'); // if username is not available
});
그런 다음 콜백을 전달하는 유효성 검사기를 호출하거나 다음 fails
과 passes
같이 합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13let validator = new Validator({
username: 'test123'
}, {
username: 'required|min:3|username_available'
});
validator.passes(function() {
// Validation passed
});
validator.fails(function() {
validator.errors.first('username');
});
참고: 호출을 시도 passes
하거나 fails
콜백 없이 유효성 검사기가 비동기 유효성 검사 규칙이 있음을 감지하면 예외가 발생합니다.
Error Messages
이 생성자는 실패한 유효성 검사 규칙에 대한 오류 메시지를 자동으로 생성합니다.
오류가 있는 경우 Validator 인스턴스에는 실패한 모든 속성에 대한 오류 메시지로 채워진 오류 속성 개체가 있습니다. 오류 속성 개체의 메서드 및 속성은 다음과 같습니다.
.first(속성)
속성에 대한 첫 번째 오류 메시지를 반환하고 그렇지 않으면 false를 반환합니다.
.get(속성)
속성에 대한 오류 메시지 배열을 반환하거나 오류가 없는 경우 빈 배열을 반환합니다.
.모두()
실패한 모든 속성에 대한 모든 오류 메시지를 포함하는 객체를 반환합니다.
.has(속성)
속성에 대한 오류 메시지가 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다.
.errorCount
유효성 검사 오류 수
1
2
3let validation = new Validator(input, rules);
validation.errors.first('email'); // returns first error message for email attribute
validator.errors.get('email'); // returns an array of error messages for the email attribute
Custom Error Messages
특정 오류 메시지가 필요하고 기본 오류 메시지를 무시하고 싶지 않은 경우 Laravel 과 마찬가지로 Validator 객체에 대한 세 번째 인수로 재정의를 전달할 수 있습니다 .
1
2
3
4
5
6
7
8
9
10let input = {
name: ''
};
let rules = {
name : 'required'
};
let validation = new Validator(input, rules, { required: 'You forgot to give a :attribute' });
validation.errors.first('name'); // returns 'You forgot to give a name'
일부 유효성 검사기에는 문자열 및 숫자 버전이 있으며 변경할 수도 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15let input = {
username: 'myusernameistoolong'
};
let rules = {
username : 'max:16'
};
let validation = new Validator(input, rules, {
max: {
string: 'The :attribute is too long. Max length is :max.'
}
});
validation.errors.first('username'); // returns 'The username is too long. Max length is 16.'
속성별로 오류 메시지를 제공할 수도 있습니다!메시지의 키를 'validator.attribute'로 설정하기만 하면 됩니다.
1
2
3
4
5
6
7
8
9let input = { name: '', email: '' };
let rules = { name : 'required', email : 'required' };
let validation = new Validator(input, rules, {
"required.email": "Without an :attribute we can't reach you!"
});
validation.errors.first('name'); // returns 'The name field is required.'
validation.errors.first('email'); // returns 'Without an email we can\'t reach you!'
Custom Attribute Names
오류 메시지에 사용자 정의 "친숙한" 속성 이름을 표시하려면 다음을 사용하십시오..setAttributeNames()
1
2
3
4
5let validator = new Validator({ name: '' }, { name: 'required' });
validator.setAttributeNames({ name: 'custom_name' });
if (validator.fails()) {
validator.errors.first('name'); // "The custom_name field is required."
}
또는 속성을 사용하여 언어의 전역 사용자 정의 속성 이름을 제공할 수 있습니다 attributes
.
사용자 정의 속성 포맷터를 구성할 수도 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13// Configure global formatter.
Validator.setAttributeFormatter(function(attribute) {
return attribute.replace(/_/g, ' ');
});
// Or configure formatter for particular instance.
let validator = new Validator({ first_name: '' }, { first_name: 'required' });
validator.setAttributeFormatter(function(attribute) {
return attribute.replace(/_/g, ' ');
});
if (validator.fails()) {
console.log(validator.errors.first('first_name')); // The first name field is required.
}
참고: 기본적으로 모든 _ 문자는 공백으로 대체됩니다.
Language Support
오류 메시지는 기본적으로 영어로 표시되며, 브라우저에 다른 언어를 포함시키려면 스크립트 태그에서 언어 파일을 참조하고 를 호출하십시오 Validator.useLang('lang_code')
.
1
2
3
4
5<script src="dist/validator.js"></script>
<script src="dist/lang/ru.js"></script>
<script>
Validator.useLang('es');
</script>
노드에서는 언어 소스 파일을 자동으로 선택합니다.
1
2let Validator = require('validatorjs');
Validator.useLang('ru');
해당 언어에 대한 지원이 표시되지 않으면 src/lang
!
다음 을 호출하여 사용자 지정 언어를 추가할 수도 있습니다 setMessages
.
1
2
3Validator.setMessages('lang_code', {
required: 'The :attribute field is required.'
});
주어진 언어에 대한 메시지의 원시 객체를 가져옵니다.
1Validator.getMessages('lang_code');
유효성 검사기가 사용하는 기본 언어를 전환합니다.
1Validator.useLang('lang_code');
사용 중인 기본 언어를 가져옵니다.
1Validator.getDefaultLang(); // returns e.g. 'en'
언어에 대한 기본 메시지 재정의:
1
2
3let messages = Validator.getMessages('en');
messages.required = 'Whoops, :attribute field is required.';
Validator.setMessages('en', messages);