we validator
v2.1.17
Existem diferenças entre as versões 2.xe 1.x. Se você continuar usando a versão antiga, poderá verificar a versão 1.x. Se você deseja atualizar para 2.x, leia primeiro o guia de atualização. Recomenda-se usar a versão 2.x.
Um plug-in de validação de formulário simples e flexível que oferece suporte a miniprogramas, navegadores e Nodejs. O miniprograma suporta: WeChat, Alipay, Baidu Smart e ByteDance. O miniprograma solicita o uso showToast por padrão.
Documentação da API | Exemplos, se você? Basta clicar em ★Star .
Usar npm:
npm install we-validator --saveUsar cdn:
< script src =" https://unpkg.com/we-validator/dist/we-validator.min.js " > </ script > A seguir está o uso do miniprograma WeChat, outros miniprogramas são semelhantes
< 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的字符串'
} ,
} ,
} )
} ,
} ) Você também pode consultar os exemplos correspondentes no projeto atual
Nota: As regras configuradas serão verificadas somente se os campos não obrigatórios possuírem valores.
| regra | descrever | Solicitação padrão |
|---|---|---|
required: true | Obrigatório | Este campo é obrigatório |
pattern: /^d+$/ | Geral regular | Não corresponde a esta regra de validação |
email: true | Formato de e-mail | Por favor insira um endereço de e-mail válido |
mobile: true | Número de telefone celular de 11 dígitos | Por favor, insira seu número de celular de 11 dígitos |
tel: true | Número de telefone fixo, por exemplo: 010-1234567, 0551-1234567 | Por favor insira seu número de telefone fixo |
url: true | URL | Insira um URL válido |
idcard: true | Número de identificação | Insira um cartão de identificação válido de 18 dígitos |
equalTo: 'field' | Verificação do valor do campo, por exemplo: senha e confirmação de senha, consulte | O valor de entrada deve ser igual ao field campo |
notEqualTo: 'field' | Os valores dos campos não podem ser iguais. A verificação é o oposto de equalTo | O valor de entrada não pode ser igual field |
contains: 'str' | Se contém um determinado caractere | O valor de entrada deve conter str |
notContains: 'str' | não pode conter determinados caracteres | O valor de entrada não pode conter str |
length: 5 | O comprimento da corda | Por favor insira 5 caracteres |
minlength: 2 | Comprimento mínimo da string | São necessários pelo menos 2 caracteres |
maxlength: 6 | Comprimento máximo da string | Você pode inserir até 6 caracteres |
rangelength: [2, 6] | uma string de um certo intervalo de comprimentos | Por favor insira um comprimento entre 2 e 6 caracteres |
number: true | número | Por favor insira um número válido |
digits: true | número inteiro positivo | Somente números inteiros positivos podem ser inseridos |
integer: true | Número inteiro positivo ou negativo | Somente números inteiros podem ser inseridos |
min: 3 | Um número maior que um determinado número (o número mínimo é limitado), você também pode comparar os valores dos campos, consulte | Por favor insira um número maior que 3 |
max: 9 | Um número menor que um determinado número (o número máximo só pode ser um determinado número), você também pode comparar os valores dos campos | Por favor insira um número menor que 9 |
range: [3, 9] | Números maiores e menores que | Por favor insira um número maior que 3 e menor que 9 |
chinese: true | Caracteres chineses | Somente caracteres chineses podem ser inseridos |
minChinese: 3 | Número mínimo de caracteres chineses | Insira pelo menos 3 caracteres chineses |
maxChinese: 9 | Número máximo de caracteres chineses | Insira até 9 caracteres chineses |
rangeChinese: [3, 9] | Quantos caracteres chineses são maiores e menores que | Apenas 3 a 9 caracteres chineses podem ser inseridos |
date: true | Data ( new Date(value) é usada para verificação por padrão) | Por favor insira uma data válida |
dateISO: true | Data (formato padrão ISO) Por exemplo: 19/09/2019, 19/09/2019 | Insira uma data válida (formato padrão ISO) |
ipv4: true | endereço ipv4 | Insira um endereço IPv4 válido |
ipv6: true | endereço ipv6 | Insira um endereço IPv6 válido |
Instanciar
Retorna : object - validatorInstance
| parâmetro | tipo | valor padrão | descrever |
|---|---|---|---|
| opções | object | ||
| [opções.regras] | object | Regras para validação de campos | |
| [opções.mensagens] | object | Mensagem de erro do campo de validação | |
| [opções.onMessage] | function | O modo de exibição de mensagem de erro detecta automaticamente o ambiente por padrão. O miniprograma usa showToast por padrãoNavegadores comuns usam alert por padrãoO lado Nodejs não faz processamento, é recomendável configurá-lo você mesmo, detalhes | |
| [opções.multiCheck] | boolean | false | A opção para verificar vários campos é usada quando vários campos precisam ser verificados ao mesmo tempo e mensagens de erro são exibidas. |
const WeValidator = require ( 'we-validator' )
new WeValidator ( {
rules : {
username : {
required : true
} ,
phoneno : {
required : true ,
mobile : true
}
} ,
messages : {
username : {
required : '请输入用户名'
} ,
phoneno : {
required : '请输入手机号' ,
mobile : '手机号格式不正确'
}
}
} )Verifique os dados, mensagens de erro serão exibidas e todas as regras de campo serão verificadas
Retorno : boolean
| parâmetro | tipo | valor padrão | descrever |
|---|---|---|---|
| dados | object | Dados do formulário que precisam ser verificados | |
| onMessage | function | Prompt de mensagem de erro personalizado, detalhes |
Ao verificar os dados, será exibida uma mensagem de erro. Apenas os campos correspondentes serão verificados, para referência.
Geralmente usado para verificar uma ou mais regras de campo individualmente
Retorno : boolean
| parâmetro | tipo | valor padrão | descrever |
|---|---|---|---|
| dados | object | Dados do formulário que precisam ser verificados | |
| campos | array | Regras de campo de verificação, obrigatórias.['phoneNo'] verifica apenas todas as regras para este campo['phoneNo:required'] Verifica apenas as regras required deste campo['phoneNo:required,mobile'] verifica apenas as regras required e mobile deste campo['phoneNo', 'code'] apenas verifica todas as regras desses dois campos | |
| onMessage | function | Prompt de mensagem de erro personalizado, detalhes |
Verifique se os dados são válidos e nenhuma mensagem de erro será exibida
Cenários de uso, por exemplo: cenários onde determinados campos de um formulário são verificados e só podem ser clicados após o botão ser clicado, para referência.
Retorno : boolean
| parâmetro | tipo | valor padrão | descrever |
|---|---|---|---|
| dados | object | Dados do formulário que precisam ser verificados | |
| campos | array | Os campos a serem verificados não são passados. Por padrão, todas as regras de campo são verificadas. Se houver, .checkFields(data, fields) as regras de campo correspondentes são verificadas. |
Adicionar dinamicamente verificação de campo, referência
| parâmetro | tipo | valor padrão | descrever |
|---|---|---|---|
| opções | object | Igual ao new WeValidator(options) , detalhes |
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 : '手机号格式不正确'
}
}
} )Remover dinamicamente validação de campo, referência
| parâmetro | tipo | valor padrão | descrever |
|---|---|---|---|
| campos | array | Campos de formulário que precisam ser removidos da validação |
validatorInstance . removeRules ( [ 'username' ] ) Método estático: adicione regras personalizadas, consulte
| parâmetro | tipo | valor padrão | descrever |
|---|---|---|---|
| regraNome | string | Nome da regra | |
| opção de regra | object | Configuração de regras | |
| [ruleOption.message] | string | O texto da mensagem de erro padrão pode ser inserido dinamicamente nos parâmetros, por exemplo,请输入长度在{0} 到{1} 之间的字符, consulte | |
| [ruleOption.rule] | function|regexp | A função de verificação de regras precisa retornar um boolean .Você também pode escrever uma expressão regular diretamente (se for apenas uma verificação de tipo regular). |
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' ) Método estático: verificação de função
| parâmetro | tipo | valor padrão | descrever |
|---|---|---|---|
| regraNome | string | Nome da regra | |
| valor | string | O que precisa ser verificado | |
| parâmetro | any | Passado para parâmetros de regra |
Suporta todas as regras padrão suportadas e também suporta regras personalizadas.
// 必填
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 Prompt de mensagem de erro personalizado
Você pode configurar um global ou individualmente, o que é muito flexível.
A prioridade é: .checkData(data, onMessage) > new WeValidator({ onMessage }) > WeValidator.onMessage > Detecção padrão
Método de prompt de mensagem padrão: Mini programas usam showToast por padrão, os navegadores usam alert por padrão e não há processamento no lado do Nodejs. É recomendável configurá-lo você mesmo.
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 )
} Os cenários de uso são os seguintes, observe: quando multiCheck for true , é recomendado usar onMessage personalizado , consulte
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 : '手机号格式不正确'
}
}
} ) ; Ver registro de alterações
Se você encontrar bugs durante o uso ou tiver boas sugestões, sinta-se à vontade para reportá-los.
Direitos autorais (c) 2019 ChanceYu
