we validator
v2.1.17
2.x 버전과 1.x 버전의 차이점이 있습니다. 이전 버전을 계속 사용하시는 경우 1.x 버전을 확인하시면 됩니다. 2.x로 업그레이드하려면 먼저 업그레이드 가이드를 읽어보시기 바랍니다. 버전 2.x를 사용하는 것이 좋습니다.
미니 프로그램, 브라우저 및 Nodejs를 지원하는 간단하고 유연한 양식 검증 플러그인입니다. 미니 프로그램은 WeChat, Alipay, Baidu Smart, ByteDance를 지원하며 미니 프로그램은 기본적으로 showToast 사용하라는 메시지를 표시합니다.
API 문서 | 예제를 원하시면 ★별표를 클릭하세요.
npm을 사용하세요:
npm install we-validator --saveCDN을 사용하세요:
< script src =" https://unpkg.com/we-validator/dist/we-validator.min.js " > </ script > 다음은 WeChat 미니 프로그램의 사용법이며, 다른 미니 프로그램도 유사합니다.
< form bindsubmit =" onSubmitForm " >
< input type =" text " name =" username " placeholder ="用户名" />
< input type =" number " name =" phoneno " placeholder ="手机号" />
< input type =" text " name =" str " placeholder ="长度为3的字符串" />
< button type =" default " formType =" submit " >提交</ button >
</ form > const WeValidator = require ( 'we-validator' )
Page ( {
onReady ( ) {
this . initValidator ( )
} ,
onSubmitForm ( e ) {
let { value } = e . detail
if ( ! this . validatorInstance . checkData ( value ) ) return
// 开始提交表单
// wx.request
} ,
initValidator ( ) {
// 实例化
this . validatorInstance = new WeValidator ( {
rules : {
username : {
required : true
} ,
phoneno : {
required : true ,
mobile : true
} ,
str : {
length : 3
} ,
} ,
messages : {
username : {
required : '请输入用户名'
} ,
phoneno : {
required : '请输入手机号' ,
mobile : '手机号格式不正确'
} ,
str : { // 非必填字段
length : '请输入长度为3的字符串'
} ,
} ,
} )
} ,
} ) 현재 프로젝트에서 해당 예시를 참조할 수도 있습니다.
참고: 구성된 규칙은 필수가 아닌 필드에 값이 있는 경우에만 확인됩니다.
| 규칙 | 설명하다 | 기본 프롬프트 |
|---|---|---|
required: true | 필수의 | 이 필드는 필수입니다 |
pattern: /^d+$/ | 일반일반 | 이 유효성 검사 규칙과 일치하지 않습니다. |
email: true | 이메일 형식 | 유효한 이메일 주소를 입력하세요. |
mobile: true | 11자리 휴대폰번호 | 휴대전화번호 11자리를 입력해주세요. |
tel: true | 유선 전화번호(예: 010-1234567, 0551-1234567) | 유선전화번호를 입력해주세요 |
url: true | URL | 유효한 URL을 입력하세요. |
idcard: true | ID 번호 | 유효한 18자리 신분증을 입력하세요. |
equalTo: 'field' | 필드 값 확인(예: 비밀번호 및 비밀번호 확인)은 다음을 참조하세요. | 입력 값은 필드 field 와 동일해야 합니다. |
notEqualTo: 'field' | 필드 값은 동일할 수 없습니다. 확인은 equalTo | 입력 값은 field 와 동일할 수 없습니다. |
contains: 'str' | 특정 문자가 포함되어 있는지 여부 | 입력 값에는 str 포함되어야 합니다. |
notContains: 'str' | 특정 문자를 포함할 수 없습니다 | 입력 값에는 str 포함될 수 없습니다. |
length: 5 | 문자열의 길이 | 5 자를 입력하세요. |
minlength: 2 | 문자열의 최소 길이 | 최소 2 자 이상이 필요합니다. |
maxlength: 6 | 문자열의 최대 길이 | 최대 6 자까지 입력할 수 있습니다. |
rangelength: [2, 6] | 특정 길이 범위의 문자열 | 2 ~ 6 자 사이의 길이를 입력하세요. |
number: true | 숫자 | 유효한 숫자를 입력하세요. |
digits: true | 양의 정수 | 양의 정수만 입력할 수 있습니다. |
integer: true | 양수 또는 음수 정수 | 정수만 입력할 수 있습니다. |
min: 3 | 특정 숫자보다 큰 숫자(최소 숫자는 제한됨), 필드 값을 비교할 수도 있습니다. | 3 보다 큰 숫자를 입력하세요. |
max: 9 | 특정 숫자보다 작은 숫자(최대 숫자는 특정 숫자만 가능), 필드 값을 비교할 수도 있습니다. | 9 보다 작은 숫자를 입력하세요 |
range: [3, 9] | 보다 큰 숫자와 보다 작은 숫자 | 3 보다 크고 9 보다 작은 숫자를 입력하세요. |
chinese: true | 한자 | 한자만 입력 가능 |
minChinese: 3 | 최소 한자 수 | 한자를 3 이상 입력하세요. |
maxChinese: 9 | 최대 한자 수 | 한자를 최대 9 까지 입력하세요. |
rangeChinese: [3, 9] | 보다 크고 작은 한자는 몇 개입니까? | 한자는 3 ~ 9 자까지만 입력할 수 있습니다. |
date: true | 날짜(기본적으로 확인을 위해 new Date(value) 사용됩니다.) | 유효한 날짜를 입력하세요. |
dateISO: true | 날짜(ISO 표준 형식) 예: 2019-09-19, 2019/09/19 | 유효한 날짜를 입력하세요(ISO 표준 형식). |
ipv4: true | IPv4 주소 | 유효한 IPv4 주소를 입력하세요. |
ipv6: true | IPv6 주소 | 유효한 IPv6 주소를 입력하세요. |
인스턴스화
반환 : object - validatorInstance
| 매개변수 | 유형 | 기본값 | 설명하다 |
|---|---|---|---|
| 옵션 | object | ||
| [옵션.규칙] | object | 필드 유효성 검사 규칙 | |
| [옵션.메시지] | object | 유효성 검사 필드 오류 메시지 | |
| [옵션.메시지] | function | 오류 메시지 표시 모드는 기본적으로 환경을 자동으로 감지합니다. 미니 프로그램은 기본적으로 showToast 사용합니다.일반 웹 브라우저는 기본적으로 alert 사용합니다.Nodejs 측은 처리를 하지 않으므로 직접 구성하는 것이 좋습니다. | |
| [옵션.다중검사] | boolean | false | 여러 필드를 동시에 확인해야 하고 오류 메시지가 표시되는 경우 여러 필드를 확인하는지 여부를 사용합니다. |
const WeValidator = require ( 'we-validator' )
new WeValidator ( {
rules : {
username : {
required : true
} ,
phoneno : {
required : true ,
mobile : true
}
} ,
messages : {
username : {
required : '请输入用户名'
} ,
phoneno : {
required : '请输入手机号' ,
mobile : '手机号格式不正确'
}
}
} )데이터를 확인하면 오류 메시지가 표시되고 모든 필드 규칙이 확인됩니다.
반환 : boolean
| 매개변수 | 유형 | 기본값 | 설명하다 |
|---|---|---|---|
| 데이터 | object | 확인이 필요한 양식 데이터 | |
| 온메시지 | function | 사용자 정의 오류 메시지 프롬프트, 세부정보 |
데이터를 확인할 때 참고용으로 해당 필드만 확인됩니다.
일반적으로 하나 이상의 필드 규칙을 개별적으로 확인하는 데 사용됩니다.
반환 : boolean
| 매개변수 | 유형 | 기본값 | 설명하다 |
|---|---|---|---|
| 데이터 | object | 확인이 필요한 양식 데이터 | |
| 전지 | array | 확인 필드 규칙은 필수입니다. 예:['phoneNo'] 이 필드에 대한 모든 규칙만 확인합니다.['phoneNo:required'] 이 필드의 required 규칙만 확인합니다.['phoneNo:required,mobile'] 이 필드의 required 및 mobile 규칙만 확인합니다.['phoneNo', 'code'] 이 두 필드의 모든 규칙만 확인합니다. | |
| 온메시지 | function | 사용자 정의 오류 메시지 프롬프트, 세부정보 |
데이터가 유효한지 확인하고 오류 메시지가 표시되지 않습니다.
예를 들어 사용 시나리오: 양식의 특정 필드가 확인되고 참조용으로 버튼을 클릭한 후에만 클릭할 수 있는 시나리오입니다.
반환 : boolean
| 매개변수 | 유형 | 기본값 | 설명하다 |
|---|---|---|---|
| 데이터 | object | 확인이 필요한 양식 데이터 | |
| 전지 | array | 검사할 필드는 통과하지 않으며 기본적으로 모든 필드 규칙이 검사됩니다. 해당 필드 규칙만 검사됩니다. 구성 방법은 .checkFields(data, fields) |
현장 확인, 참조를 동적으로 추가
| 매개변수 | 유형 | 기본값 | 설명하다 |
|---|---|---|---|
| 옵션 | object | new WeValidator(options) 와 동일, 세부 사항 |
const WeValidator = require ( 'we-validator' )
const validatorInstance = new WeValidator ( {
rules : {
username : {
required : true
}
} ,
messages : {
username : {
required : '请输入用户名'
}
}
} )
// 动态添加校验
validatorInstance . addRules ( {
rules : {
phoneno : {
required : true ,
mobile : true
}
} ,
messages : {
phoneno : {
required : '请输入手机号' ,
mobile : '手机号格式不正确'
}
}
} )필드 유효성 검사, 참조를 동적으로 제거
| 매개변수 | 유형 | 기본값 | 설명하다 |
|---|---|---|---|
| 전지 | array | 유효성 검사에서 제거해야 하는 양식 필드 |
validatorInstance . removeRules ( [ 'username' ] ) 정적 방법: 사용자 정의 규칙 추가, 참조
| 매개변수 | 유형 | 기본값 | 설명하다 |
|---|---|---|---|
| 규칙이름 | string | 규칙 이름 | |
| 규칙옵션 | object | 규칙 구성 | |
| [ruleOption.message] | string | 기본 오류 메시지 텍스트는 매개변수에 동적으로 삽입될 수 있습니다. 예를 들어请输入长度在{0} 到{1} 之间的字符. | |
| [ruleOption.rule] | function|regexp | 규칙 확인 함수는 boolean 반환해야 합니다.정규식을 직접 작성할 수도 있습니다(단지 정규 유형 확인인 경우). |
const WeValidator = require ( 'we-validator' )
// 添加自定义规则（这两种写法一样）
WeValidator . addRule ( 'theRuleName' , {
message : '默认错误信息文字' ,
rule ( value , param ) {
return / d / . test ( value )
}
} )
WeValidator . addRule ( 'theRuleName' , {
message : '默认错误信息文字' ,
rule : / d /
} )
// 使用方式一，实例化
new WeValidator ( {
rules : {
field1 : {
theRuleName : true
}
} ,
messages : {
field1 : {
theRuleName : '提示信息'
}
}
} )
// 使用方式二，调用函数
WeValidator . checkValue ( 'theRuleName' , 'str' ) 정적 방법: 기능 검증
| 매개변수 | 유형 | 기본값 | 설명하다 |
|---|---|---|---|
| 규칙이름 | string | 규칙 이름 | |
| 값 | string | 확인해야 할 사항 | |
| 매개변수 | any | 규칙 매개변수에 전달됨 |
기본으로 지원되는 모든 규칙을 지원하고 사용자 정의 규칙도 지원합니다.
// 必填
let b1 = WeValidator . checkValue ( 'required' , 'str' ) // true
// 不能小于6的数字
let b2 = WeValidator . checkValue ( 'min' , 'str' , 6 ) // false
// 大于2小于5的数字
let b3 = WeValidator . checkValue ( 'range' , 'str' , [ 2 , 5 ] ) // false 사용자 정의 오류 메시지 프롬프트
전역적으로 또는 개별적으로 구성할 수 있으며 이는 매우 유연합니다.
우선순위는 다음과 같습니다. .checkData(data, onMessage) > new WeValidator({ onMessage }) > WeValidator.onMessage > 기본 감지
기본 메시지 프롬프트 방법: 미니 프로그램은 기본적으로 showToast 사용하고, 브라우저는 기본적으로 alert 사용하며, Nodejs 측에서는 처리가 없습니다. 직접 구성하는 것이 좋습니다.
const WeValidator = require ( 'we-validator' )
// 1、全局配置
WeValidator . onMessage = function ( data ) {
/*
data 参数
{
msg, // 提示文字
name, // 表单控件的 name
value, // 表单控件的值
param // rules 验证字段传递的参数
}
*/
}
// 2、实例化配置
new WeValidator ( {
rules : { } ,
message : { } ,
onMessage : function ( data ) {
alert ( data . msg )
}
} )
// 3、验证的时候配置 onMessage（nodejs端校验可以使用此方式）
if ( ! obj . checkData ( formData , onMessage ) ) return
function onMessage ( data ) {
alert ( data . msg )
} 사용 시나리오는 다음과 같습니다. 참고: multiCheck 가 true 인 경우 사용자 정의 onMessage 사용하는 것이 좋습니다 .
var validatorInstance = new WeValidator ( {
multiCheck : true ,
onMessage : function ( data ) {
console . log ( data ) ;
// 根据自己的项目去处理，控制错误信息的显示
} ,
rules : {
username : {
required : true
} ,
phoneno : {
required : true ,
mobile : true
}
} ,
messages : {
username : {
required : '请输入用户名'
} ,
phoneno : {
required : '请输入手机号' ,
mobile : '手机号格式不正确'
}
}
} ) ; 변경 로그 보기
사용 중 버그를 발견하거나 좋은 제안이 있으시면 언제든지 신고해 주세요.
저작권 (c) 2019 ChanceYu
