we validator
v2.1.17
Existen diferencias entre las versiones 2.x y 1.x. Si continúa usando la versión anterior, puede verificar la versión 1.x. Si desea actualizar a 2.x, lea primero la guía de actualización. Se recomienda utilizar la versión 2.x.
Un complemento de validación de formularios simple y flexible que admite miniprogramas, navegadores y Nodejs. El miniprograma admite: WeChat, Alipay, Baidu Smart y ByteDance. El miniprograma solicita utilizar showToast de forma predeterminada.
Documentación API | Ejemplos, si es así, simplemente haga clic en ★Estrella .
Utilice npm:
npm install we-validator --saveUtilice CDN:
< script src =" https://unpkg.com/we-validator/dist/we-validator.min.js " > </ script > El siguiente es el uso del miniprograma WeChat, otros miniprogramas son similares
< 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的字符串'
} ,
} ,
} )
} ,
} ) También puede consultar los ejemplos correspondientes en el proyecto actual.
Nota: Las reglas configuradas se verificarán solo si los campos no obligatorios tienen valores.
| regla | describir | Mensaje predeterminado |
|---|---|---|
required: true | Requerido | Este campo es obligatorio |
pattern: /^d+$/ | general regular | No coincide con esta regla de validación |
email: true | Formato de correo electrónico | Por favor, introduce una dirección de correo electrónico válida |
mobile: true | número de teléfono móvil de 11 dígitos | Por favor introduce tu número de teléfono móvil de 11 dígitos |
tel: true | Número de teléfono fijo por ejemplo: 010-1234567, 0551-1234567 | Por favor introduce tu número de teléfono fijo |
url: true | URL | Por favor ingresa una URL válida |
idcard: true | número de identificación | Por favor introduce un documento de identidad válido de 18 dígitos |
equalTo: 'field' | Verificación del valor del campo, por ejemplo: contraseña y confirmar contraseña, consulte | El valor de entrada debe ser el mismo que el del field |
notEqualTo: 'field' | Los valores de campo no pueden ser los mismos. La verificación es lo opuesto a equalTo | El valor de entrada no puede ser el mismo que field |
contains: 'str' | Si contiene un carácter determinado | El valor de entrada debe contener str |
notContains: 'str' | no puede contener ciertos caracteres | El valor de entrada no puede contener str |
length: 5 | La longitud de la cuerda | Por favor introduce 5 caracteres |
minlength: 2 | Longitud mínima de cuerda | Se requieren al menos 2 caracteres |
maxlength: 6 | Longitud máxima de cuerda | Puede ingresar hasta 6 caracteres |
rangelength: [2, 6] | una cuerda de un cierto rango de longitudes | Por favor introduzca una longitud entre 2 y 6 caracteres |
number: true | número | Por favor ingresa un número válido |
digits: true | número entero positivo | Sólo se pueden introducir números enteros positivos |
integer: true | Número entero positivo o negativo | Sólo se pueden introducir números enteros |
min: 3 | Un número mayor que un número determinado (el número mínimo es limitado), también puede comparar valores de campo, consulte | Por favor introduce un número mayor que 3 |
max: 9 | Un número menor que un número determinado (el número máximo solo puede ser un número determinado), también puede comparar valores de campo | Por favor introduce un número menor que 9 |
range: [3, 9] | Números mayores que y menores que | Por favor ingrese un número mayor que 3 y menor que 9 |
chinese: true | caracteres chinos | Sólo se pueden ingresar caracteres chinos |
minChinese: 3 | Número mínimo de caracteres chinos | Introduzca al menos 3 caracteres chinos |
maxChinese: 9 | Número máximo de caracteres chinos | Introduzca hasta 9 caracteres chinos |
rangeChinese: [3, 9] | ¿Cuántos caracteres chinos son mayores que y menores que? | Sólo se pueden ingresar de 3 a 9 caracteres chinos |
date: true | Fecha ( new Date(value) se utiliza para la verificación de forma predeterminada) | Por favor ingresa una fecha válida |
dateISO: true | Fecha (formato estándar ISO) Por ejemplo: 2019-09-19, 2019/09/19 | Por favor ingrese una fecha válida (formato estándar ISO) |
ipv4: true | dirección ipv4 | Por favor ingrese una dirección IPv4 válida |
ipv6: true | dirección ipv6 | Por favor ingrese una dirección IPv6 válida |
Crear una instancia
Devuelve : object - validatorInstance
| parámetro | tipo | valor predeterminado | describir |
|---|---|---|---|
| opciones | object | ||
| [opciones.reglas] | object | Reglas para validar campos | |
| [opciones.mensajes] | object | Mensaje de error del campo de validación | |
| [opciones.onMessage] | function | El modo de visualización de mensajes de error detecta automáticamente el entorno de forma predeterminada. El mini programa usa showToast por defectoLos navegadores web habituales utilizan alert de forma predeterminadaEl lado de Nodejs no realiza procesamiento, se recomienda configurarlo usted mismo, detalles | |
| [opciones.multiCheck] | boolean | false | La verificación de varios campos se utiliza cuando es necesario verificar varios campos al mismo tiempo y se muestran mensajes de error. |
const WeValidator = require ( 'we-validator' )
new WeValidator ( {
rules : {
username : {
required : true
} ,
phoneno : {
required : true ,
mobile : true
}
} ,
messages : {
username : {
required : '请输入用户名'
} ,
phoneno : {
required : '请输入手机号' ,
mobile : '手机号格式不正确'
}
}
} )Verifique los datos, se mostrarán mensajes de error y se verificarán todas las reglas de campo
Retorno : boolean
| parámetro | tipo | valor predeterminado | describir |
|---|---|---|---|
| datos | object | Datos del formulario que deben verificarse | |
| en mensaje | function | Mensaje de error personalizado, detalles |
Al verificar datos, se mostrará un mensaje de error. Solo se verificarán los campos correspondientes, como referencia.
Generalmente se usa para verificar una o más reglas de campo individualmente.
Retorno : boolean
| parámetro | tipo | valor predeterminado | describir |
|---|---|---|---|
| datos | object | Datos del formulario que deben verificarse | |
| campos | array | Reglas de campo de verificación, obligatorias. Por ejemplo:['phoneNo'] solo verifica todas las reglas para este campo['phoneNo:required'] Solo verifica las reglas required de este campo['phoneNo:required,mobile'] solo verifica las reglas required y mobile de este campo['phoneNo', 'code'] solo verifica todas las reglas de estos dos campos | |
| en mensaje | function | Mensaje de error personalizado, detalles |
Verifique si los datos son válidos y no aparecerá ningún mensaje de error
Escenarios de uso, por ejemplo: escenarios en los que ciertos campos de un formulario se verifican y solo se puede hacer clic en ellos después de hacer clic en el botón, como referencia.
Retorno : boolean
| parámetro | tipo | valor predeterminado | describir |
|---|---|---|---|
| datos | object | Datos del formulario que deben verificarse | |
| campos | array | Los campos a verificar no se pasan. De forma predeterminada, se verifican todas las reglas de campo. Si hay alguna, solo se verifican las reglas de campo correspondientes. El método de configuración es el mismo que .checkFields(data, fields) |
Agregar dinámicamente verificación de campo, referencia
| parámetro | tipo | valor predeterminado | describir |
|---|---|---|---|
| opciones | object | Igual que new WeValidator(options) , detalles |
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 : '手机号格式不正确'
}
}
} )Eliminar dinámicamente validación de campo, referencia
| parámetro | tipo | valor predeterminado | describir |
|---|---|---|---|
| campos | array | Campos de formulario que deben eliminarse de la validación |
validatorInstance . removeRules ( [ 'username' ] ) Método estático: agregue reglas personalizadas, consulte
| parámetro | tipo | valor predeterminado | describir |
|---|---|---|---|
| nombrederegla | string | Nombre de la regla | |
| opción de regla | object | Configuración de reglas | |
| [opciónregla.mensaje] | string | El texto del mensaje de error predeterminado se puede insertar dinámicamente en los parámetros; por ejemplo,请输入长度在{0} 到{1} 之间的字符; consulte | |
| [opciónregla.regla] | function|regexp | La función de verificación de reglas necesita devolver un boolean .También puede escribir una expresión regular directamente (si es solo una verificación 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: verificación de función
| parámetro | tipo | valor predeterminado | describir |
|---|---|---|---|
| nombre de regla | string | Nombre de la regla | |
| valor | string | Lo que hay que verificar | |
| parámetro | any | Pasado a los parámetros de la regla. |
Admite todas las reglas admitidas predeterminadas y también admite reglas 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 Mensaje de error personalizado
Puedes configurar uno de forma global o individual, lo cual es muy flexible.
La prioridad es: .checkData(data, onMessage) > new WeValidator({ onMessage }) > WeValidator.onMessage > Detección predeterminada
Método de solicitud de mensaje predeterminado: los mini programas usan showToast de forma predeterminada, los navegadores usan alert de manera predeterminada y no hay procesamiento por parte de Nodejs. Se recomienda configurarlo usted mismo.
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 )
} Los escenarios de uso son los siguientes, nota: cuando multiCheck es true , se recomienda 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 cambios
Si encuentra errores durante el uso o tiene buenas sugerencias, no dude en informarlos.
Copyright (c) 2019 ChanceYu
