멋진 커뮤니티 모듈
  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} - 유효성을 검사하려는 데이터

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

그런 다음 콜백을 전달하는 유효성 검사기를 호출하거나 다음 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>

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

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-2021 fibjs.org | 지원