멋진 커뮤니티 모듈
  1. 첫 장
  2. 커뮤니티 모듈
  3. 유효성 검사기

유효성 검사기

빌드 상태

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} - 유효성을 검사하려는 데이터

규칙 {객체} - 유효성 검사 규칙

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:날짜

유효성 검사 대상 필드는 지정된 필드보다 같거나 같아야 합니다.

알파

유효성 검사 대상 필드는 모두 알파벳 문자여야 합니다.

alpha_dash

유효성 검사 대상 필드에는 대시 및 밑줄뿐만 아니라 영숫자 문자도 포함될 수 있습니다.

alpha_num

유효성 검사 대상 필드는 전체가 영숫자 문자여야 합니다.

정렬

유효성 검사 중인 필드는 배열이어야 합니다.

이전:날짜

유효성 검사 중인 필드는 지정된 날짜 이전이어야 합니다.

before_or_equal:날짜

유효성 검사 중인 필드는 지정된 날짜 이전이거나 같아야 합니다.

사이:최소,최대

검증 중인 필드의 크기는 지정된 최소값과 최대값 사이여야 합니다. 문자열, 숫자 및 파일은 크기 규칙과 동일한 방식으로 평가됩니다.

부울

true검증 중인 필드는 , false, 0, 1, 'true', 'false', '0', '1', 형식의 부울 값이어야 합니다 .

확인됨

검증 중인 필드에는 foo_confirmation과 일치하는 필드가 있어야 합니다. 예를 들어 검증 중인 필드가 비밀번호인 경우 일치하는 비밀번호_확인 필드가 입력에 있어야 합니다.

날짜

유효성 검사 대상 필드는 Javascript Date개체에서 허용되는 유효한 날짜 형식이어야 합니다.

숫자: 값

유효성 검사 대상 필드는 숫자여야 하며 정확한 길이의 값을 가지고 있어야 합니다.

다름:속성

지정된 필드는 유효성 검사 중인 필드와 달라야 합니다.

이메일

검증 중인 필드는 이메일 주소 형식이어야 합니다.

마녀

유효성 검사 대상 필드는 16진수 형식이어야 합니다. 16진수 색상 코드 유효성 검사와 같은 다른 규칙과 함께 사용하면 유용합니다 hex|size:6.

in:foo,bar,...

검증 중인 필드는 지정된 값 목록에 포함되어야 합니다. 필드는 배열 또는 문자열일 수 있습니다.

정수

유효성 검사 중인 필드에는 정수 값이 있어야 합니다.

최대:값

속성이 지정된 크기보다 크지 않은지 확인

참고: 최대 검사도 포함됩니다.

최소:값

속성이 최소한 지정된 크기인지 확인합니다.

참고: 최소 검사도 포함됩니다.

not_in:foo,bar,...

유효성 검사 중인 필드는 지정된 값 목록에 포함되어서는 안 됩니다.

숫자

속성이 숫자인지 확인합니다. 숫자의 문자열 표현이 통과됩니다.

필수의

값의 문자열 표현 길이가 >인지 확인합니다.

필수_if:다른 필드,값

anotherfield 필드가 임의의 값과 같은 경우 유효성 검사 중인 필드가 있어야 하며 비어 있어서는 안 됩니다.

필수_제외:다른 필드,값

유효성 검사 중인 필드는 존재해야 하며 anotherfield 필드가 어떤 값과도 같지 않으면 비어 있어서는 안 됩니다.

필수_사용:foo,bar,...

유효성 검사 중인 필드는 반드시 존재해야 하며 지정된 다른 필드가 있는 경우에만 비어 있으면 안 됩니다.

필수_포함_모두:foo,bar,...

유효성 검사 중인 필드는 반드시 존재해야 하며 지정된 다른 필드가 모두 존재하는 경우에만 비어 있으면 안 됩니다.

필수 없이:foo,bar,...

유효성 검사 중인 필드는 반드시 존재해야 하며 지정된 다른 필드가 없는 경우에만 비어 있으면 안 됩니다.

require_without_all:foo,bar,...

유효성 검사 중인 필드는 반드시 존재해야 하며 지정된 다른 필드가 모두 존재하지 않는 경우에만 비어 있으면 안 됩니다.

동일:속성

지정된 필드는 유효성 검사 중인 필드와 일치해야 합니다.

크기:값

검증 대상 필드의 크기는 지정된 값과 일치해야 합니다. 문자열 데이터의 경우 값은 문자 수에 해당하고, 숫자 데이터의 경우 값은 지정된 정수 값에 해당합니다.

끈

유효성 검사 중인 필드는 문자열이어야 합니다.

URL

속성에 유효한 URL 형식이 있는지 확인

정규식:패턴

유효성 검사 중인 필드는 지정된 정규식과 일치해야 합니다.

참고 : 패턴을 사용할 때 regex특히 정규식에 파이프 문자가 포함된 경우 파이프 구분 기호를 사용하는 대신 배열에 규칙을 지정해야 할 수 있습니다. 정규식 패턴에 사용한 각 백슬래시에 대해 각각을 이스케이프해야 합니다. 또 다른 백슬래시로.

예시 3 - 정규식 검증

1
2
3
4
5
6
7
8
9
10
11
12
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
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 내부의 :attribute는 속성 이름으로 대체됩니다.

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
});

fails그런 다음 콜백 을 전달하는 유효성 검사기를 호출합니다 passes.

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>

Node에서는 언어 소스 파일을 자동으로 선택합니다.

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);
© 저작권 2012-2024 fibjs.org | 지원