멋진 커뮤니티 모듈

유효성 검사기

빌드 상태

validatorjs 라이브러리는 브라우저와 Node.js 모두에서 JavaScript의 데이터 유효성 검사를 매우 쉽게 만듭니다. 이 라이브러리는 Laravel 프레임워크의 Validator 에서 영감을 받았습니다 .

validatorjs를 사용하는 이유는 무엇입니까?

  • 어떤 라이브러리에도 의존하지 않습니다.
  • 브라우저와 노드 모두에서 작동합니다.
  • 읽기 가능하고 선언적인 유효성 검사 규칙.
  • 다국어 지원 오류 메시지.
  • AMD/Require.js 및 CommonJS/Browserify 지원.

설치

Bower, NPM 또는 Github의 /dist 디렉터리에서 validatorjs를 가져옵니다.

1
bower install validatorjs
1
npm install validatorjs

Browser

1
<script src="validator.js"></script>

Node.js / Browserify

1
let Validator = require('validatorjs');

Basic Usage

1
let 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 16
let 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 14
let 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 10
let 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 19
let 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 12
let data = { users: [{ name: 'John', bio: { age: 28, education: { primary: 'Elementary School', secondary: 'Secondary School' } } }] };

유효성 검사 규칙을 다음과 같이 선언할 수 있습니다.

1 2 3 4 5 6
let 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 13
let 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 11
let 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

1
Validator.register(name, callbackFn, errorMessage);

name {String} - 규칙의 이름입니다.

callbackFn {Function} - 유효성 검사 성공 또는 실패를 나타내는 부울을 반환합니다.

errorMessage {String} - 사용자 지정 오류 메시지를 지정할 수 있는 선택적 문자열입니다. errorMessage 내의 속성은 속성 이름으로 대체됩니다 .

1 2 3
Validator.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 6
Validator.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 });

그런 다음 콜백을 전달하는 유효성 검사기를 호출하거나 다음 failspasses같이 합니다.

1 2 3 4 5 6 7 8 9 10 11 12 13
let 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 3
let 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 10
let 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 15
let 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 9
let 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 5
let 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 2
let Validator = require('validatorjs'); Validator.useLang('ru');

해당 언어에 대한 지원이 표시되지 않으면 src/lang!

다음 을 호출하여 사용자 지정 언어를 추가할 수도 있습니다 setMessages.

1 2 3
Validator.setMessages('lang_code', { required: 'The :attribute field is required.' });

주어진 언어에 대한 메시지의 원시 객체를 가져옵니다.

1
Validator.getMessages('lang_code');

유효성 검사기가 사용하는 기본 언어를 전환합니다.

1
Validator.useLang('lang_code');

사용 중인 기본 언어를 가져옵니다.

1
Validator.getDefaultLang(); // returns e.g. 'en'

언어에 대한 기본 메시지 재정의:

1 2 3
let messages = Validator.getMessages('en'); messages.required = 'Whoops, :attribute field is required.'; Validator.setMessages('en', messages);