jedi validate
v1.5.6
Jedi Validate는 경량 양식 유효성 검사 구성 요소입니다.
이것은 JS 클래스이며 DOM 요소와 옵션 객체를 전달하여 새 인스턴스를 생성할 수 있습니다.
// npm install jedi-validate
import JediValidate from 'jedi-validate' ;
const JediValidate = new JediValidate ( document . querySelector ( '#form5' ) ) ;기본적으로 양식은 HTML에 설정된 매개변수와 함께 ajax를 통해 전송됩니다.
상호 작용을 위해 엄격한 json 형식을 제공하므로 다양한 방법으로 양식을 보낼 수 있습니다.
그러나 서버 응답은 항상 하나의 구조를 갖습니다. 구현하기가 더 쉽습니다.
소스 코드를 빌드하거나, 테스트를 실행하거나, 기여하려면 먼저 이 저장소를 로컬 시스템에 포크하거나 복제하세요. NodeJS와 npm이 설치되어 있는지 확인하세요. node -v 및 npm -v 사용하여 터미널을 체크인합니다.
프로젝트 종속성을 설치하려면 먼저 실행하세요.
npm install
소스를 빌드하고 터미널 실행의 변경 사항을 감시하려면,
npm run build
소스를 번들로 묶어 localhost:4000 에 제공하려면 다음을 실행하세요.
npm run dev
그러면 원하는 디렉터리나 리소스로 이동할 수 있는 webpack 로컬 서버가 열립니다. 테스트 페이지는 example/bootstrap.html 에 있습니다.
테스트가 아직 완료되지 않았으며 콘솔이나 테스트 브라우저를 통해 테스트를 실행하려고 하면 런타임 오류가 발생합니다.
옵션에는 세 가지 유형이 있습니다.
{
ajax : {
url : null ,
enctype : 'application/x-www-form-urlencoded' ,
sendType : 'serialize' , // 'formData', 'json'
method : 'GET'
} ,
rules : { } ,
messages : { } ,
containers : {
parent : 'form-group' ,
message : 'help-block' ,
baseMessage : 'base-error'
} ,
states : {
error : 'error' ,
valid : 'valid' ,
pristine : 'pristine' ,
dirty : 'dirty'
} ,
callbacks : {
success : function ( ) {
} ,
error : function ( ) {
}
} ,
clean : true ,
redirect : true
} ajax 옵션에서 양식을 보내는 방법을 정의합니다. 양식을 전송하지 않으려면 null 일 수 있으며, 다음 옵션이 있는 개체일 수 있습니다.
기본값: null action 양식 속성 또는 초기화 옵션으로 재정의될 수 있습니다.
기본값: 'application/x-www-form-urlencoded' enctype 양식 속성, init 옵션 또는 sendType 으로 재정의될 수 있습니다.
기본값: 'GET' method 양식 속성이나 초기화 옵션으로 재정의될 수 있습니다.
기본값: 'serialize'
세 가지 방법으로 데이터를 인코딩하고 보낼 수 있습니다. 유효한 옵션은 다음과 같습니다.
'formData' - 양식을 FormData로 보냅니다. 'Content-type' 을 'multipart/form-data' 로'json' - 양식을 JSON 개체로 보냅니다. 'Content-type' 을 'application/json; charset=utf-8''serialize' - 일반 요청으로 양식을 보냅니다. 'Content-type' 'application/x-www-form-urlencoded' 로 설정하세요.파일은 'formData' 인코딩을 통해서만 보낼 수 있습니다.
name=111&phone=222222222&email=wow%40wow.com
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="name"
111
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="phone"
222222222
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="email"
...
{ "name" : " 111 " , "phone" : " 222222222 " , "email" : " [email protected] " , "file" : " index.html " }입력 유효성을 검사하는 데 사용되는 규칙입니다. 각 양식 요소는 해당 규칙이 있는 경우 'name' 속성과 일치합니다. 규칙이 없으면 유효성 검사가 수행되지 않습니다.
규칙은 기본적으로 정의되지 않지만 속성이나 HTML의 클래스 또는 init 옵션을 통해 설정할 수 있습니다.
- 필수 : 부울
- 정규식 : 정규식
- 이메일 : 부울
- 전화 : 부울
- URL : 부울
- 파일 크기: 숫자
- 확장자: 문자열
이러한 속성을 사용할 수 있습니다.
- 유형 - 이메일, 전화번호 또는 URL(각 유형에 대해 정규 표현식이 사용됨)
- 패턴 - 속성 값을 포함한 정규식
- 필수 - 빈 값에 대한 입력 확인
예:
< input id =" name " type =" text " name =" name " required class =" required " >
< input id =" email " type =" email " name =" email " class =" required " > addMethod 함수를 사용하여 자신만의 규칙을 설정할 수 있습니다.
JediValidate . addMethod ( 'methodName' , function ( value , options ) {
return true // true if valid
} , 'Error message' ) ;초기화할 때 옵션 객체의 일부로 규칙을 추가하세요.
const validator = new JediValidate ( formWrapper , {
rules : {
name : {
required : true
} ,
email : {
email : true
} ,
phone : {
regexp : / ^([+]+)*[0-9x20x28x29-]{5,20}$ /
} ,
file : {
filesize : 10000 ,
extension : "html|css|txt"
}
file2 : {
filesize : [ 10000 , "two-files-checkbox" ] , // check only if checkbox checked
extension : [ "html|css|txt" , "two-files-checkbox" ] , // without recollect by default
another : [ 'param' , function ( oldData ) {
const newData = validator . collect ( 'two-files-checkbox' ) ; // manual data recollect for concrete field
return ! ! newData [ 'two-files-checkbox' ] ;
} ] ;
}
}
} ) ;전체 양식에서 또는 입력 이름만으로 데이터를 회수할 수 있습니다. 이 메서드는 새 데이터를 반환합니다.
validator . collect ( ) ; // all form
validator . collect ( 'two-files-checkbox' ) ; // one field 유효성 검사에 실패할 경우를 대비해 오류 메시지를 직접 정의할 수 있습니다. 양식 요소가 유효성 검사에 실패하는 경우 요소의 '이름' 속성에 해당하는 메시지가 적용됩니다.
messages : {
phone : {
regexp : "Invalid phone number"
} ,
file : {
filesize : "File is too big"
}
} ,
