we validator
v2.1.17
Il existe des différences entre les versions 2.x et 1.x. Si vous continuez à utiliser l'ancienne version, vous pouvez vérifier la version 1.x. Si vous souhaitez effectuer une mise à niveau vers la version 2.x, veuillez d'abord lire le guide de mise à niveau. Il est recommandé d'utiliser la version 2.x.
Un plug-in de validation de formulaire simple et flexible qui prend en charge les mini-programmes, les navigateurs et Nodejs. Le mini programme prend en charge : WeChat, Alipay, Baidu Smart et ByteDance. Le mini programme invite à utiliser showToast par défaut.
Documentation API | Exemples, si vous ? Cliquez simplement sur ★Star .
Utilisez npm :
npm install we-validator --saveUtilisez cdn :
< script src =" https://unpkg.com/we-validator/dist/we-validator.min.js " > </ script > Ce qui suit est l'utilisation du mini-programme WeChat, d'autres mini-programmes sont similaires
< 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的字符串'
} ,
} ,
} )
} ,
} ) Vous pouvez également vous référer aux exemples correspondants sous le projet en cours
Remarque : Les règles configurées seront vérifiées uniquement si les champs non obligatoires ont des valeurs.
| règle | décrire | Invite par défaut |
|---|---|---|
required: true | Requis | Ce champ est obligatoire |
pattern: /^d+$/ | Général régulier | Ne correspond pas à cette règle de validation |
email: true | Format de courrier électronique | S'il vous plaît, mettez une adresse email valide |
mobile: true | Numéro de téléphone portable à 11 chiffres | Veuillez saisir votre numéro de téléphone portable à 11 chiffres |
tel: true | Numéro de téléphone fixe par exemple : 010-1234567, 0551-1234567 | Veuillez saisir votre numéro de téléphone fixe |
url: true | URL | Veuillez saisir une URL valide |
idcard: true | Numéro d'identification | Veuillez saisir une carte d'identité valide à 18 chiffres |
equalTo: 'field' | Vérification de la valeur du champ, par exemple : mot de passe et confirmation du mot de passe, reportez-vous à | La valeur d'entrée doit être la même que le field champ |
notEqualTo: 'field' | Les valeurs des champs ne peuvent pas être les mêmes. La vérification est l'opposé d' equalTo | La valeur saisie ne peut pas être la même que field |
contains: 'str' | S'il contient un certain caractère | La valeur d'entrée doit contenir str |
notContains: 'str' | ne peut pas contenir certains caractères | La valeur d'entrée ne peut pas contenir str |
length: 5 | La longueur de la chaîne | Veuillez saisir 5 caractères |
minlength: 2 | Longueur minimale de la chaîne | Au moins 2 caractères sont requis |
maxlength: 6 | Longueur maximale de la chaîne | Vous pouvez saisir jusqu'à 6 caractères |
rangelength: [2, 6] | une chaîne d'une certaine gamme de longueurs | Veuillez saisir une longueur comprise entre 2 et 6 caractères |
number: true | nombre | Veuillez entrer un numéro valide |
digits: true | nombre entier positif | Seuls des nombres entiers positifs peuvent être saisis |
integer: true | Nombre entier positif ou négatif | Seuls des nombres entiers peuvent être saisis |
min: 3 | Un nombre supérieur à un certain nombre (le nombre minimum est limité), vous pouvez également comparer les valeurs des champs, reportez-vous à | Veuillez saisir un nombre supérieur à 3 |
max: 9 | Un nombre inférieur à un certain nombre (le nombre maximum ne peut être qu'un certain nombre), vous pouvez également comparer les valeurs des champs | Veuillez saisir un nombre inférieur à 9 |
range: [3, 9] | Nombres supérieurs et inférieurs à | Veuillez saisir un nombre supérieur à 3 et inférieur à 9 |
chinese: true | Caractères chinois | Seuls les caractères chinois peuvent être saisis |
minChinese: 3 | Nombre minimum de caractères chinois | Saisissez au moins 3 caractères chinois |
maxChinese: 9 | Nombre maximum de caractères chinois | Saisissez jusqu'à 9 caractères chinois |
rangeChinese: [3, 9] | Combien de caractères chinois sont supérieurs et inférieurs à | Seuls 3 à 9 caractères chinois peuvent être saisis |
date: true | Date ( new Date(value) est utilisée pour la vérification par défaut) | Veuillez entrer une date valide |
dateISO: true | Date (format standard ISO) Par exemple : 2019-09-19, 2019/09/19 | Veuillez saisir une date valide (format standard ISO) |
ipv4: true | adresse IPv4 | Veuillez saisir une adresse IPv4 valide |
ipv6: true | adresse IPv6 | Veuillez saisir une adresse IPv6 valide |
Instancier
Renvoie : object - validatorInstance
| paramètre | taper | valeur par défaut | décrire |
|---|---|---|---|
| choix | object | ||
| [options.règles] | object | Règles de validation des champs | |
| [options.messages] | object | Message d'erreur du champ de validation | |
| [options.onMessage] | function | Le mode d'affichage des messages d'erreur détecte automatiquement l'environnement par défaut. Le mini programme utilise showToast par défautLes navigateurs Web ordinaires utilisent alert par défautLe côté Nodejs ne fait pas de traitement, il est recommandé de le configurer vous-même, détails | |
| [options.multiCheck] | boolean | false | La vérification de plusieurs champs est utilisée lorsque plusieurs champs doivent être vérifiés en même temps et que des messages d'erreur sont affichés. |
const WeValidator = require ( 'we-validator' )
new WeValidator ( {
rules : {
username : {
required : true
} ,
phoneno : {
required : true ,
mobile : true
}
} ,
messages : {
username : {
required : '请输入用户名'
} ,
phoneno : {
required : '请输入手机号' ,
mobile : '手机号格式不正确'
}
}
} )Vérifiez les données, des messages d'erreur seront affichés et toutes les règles de champ seront vérifiées
Retour : boolean
| paramètre | taper | valeur par défaut | décrire |
|---|---|---|---|
| données | object | Données de formulaire qui doivent être vérifiées | |
| surMessage | function | Invite de message d'erreur personnalisée, détails |
Lors de la vérification des données, un message d'erreur s'affichera. Seuls les champs correspondants seront vérifiés, à titre de référence.
Généralement utilisé pour vérifier une ou plusieurs règles de champ individuellement
Retour : boolean
| paramètre | taper | valeur par défaut | décrire |
|---|---|---|---|
| données | object | Données de formulaire qui doivent être vérifiées | |
| champs | array | Règles du champ de vérification, obligatoires. Par exemple :['phoneNo'] vérifie uniquement toutes les règles pour ce champ['phoneNo:required'] Vérifie uniquement les règles required de ce champ['phoneNo:required,mobile'] vérifie uniquement les règles required et mobile de ce champ['phoneNo', 'code'] vérifie uniquement toutes les règles de ces deux champs | |
| surMessage | function | Invite de message d'erreur personnalisée, détails |
Vérifiez si les données sont valides et aucun message d'erreur ne sera demandé
Scénarios d'utilisation, par exemple : scénarios dans lesquels certains champs d'un formulaire sont vérifiés et ne peuvent être cliqués qu'après avoir cliqué sur le bouton, pour référence.
Retour : boolean
| paramètre | taper | valeur par défaut | décrire |
|---|---|---|---|
| données | object | Données de formulaire qui doivent être vérifiées | |
| champs | array | Les champs à vérifier ne sont pas transmis. Par défaut, toutes les règles de champ sont vérifiées. S'il y en a, seules les règles de champ correspondantes sont vérifiées. La méthode de configuration est la même que .checkFields(data, fields) |
Ajouter dynamiquement une vérification de champ, une référence
| paramètre | taper | valeur par défaut | décrire |
|---|---|---|---|
| choix | object | Identique au new WeValidator(options) , détails |
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 : '手机号格式不正确'
}
}
} )Supprimer dynamiquement la validation de champ, référence
| paramètre | taper | valeur par défaut | décrire |
|---|---|---|---|
| champs | array | Champs de formulaire qui doivent être supprimés de la validation |
validatorInstance . removeRules ( [ 'username' ] ) Méthode statique : ajoutez des règles personnalisées, reportez-vous à
| paramètre | taper | valeur par défaut | décrire |
|---|---|---|---|
| nom de la règle | string | Nom de la règle | |
| optionrègle | object | Configuration des règles | |
| [ruleOption.message] | string | Le texte du message d'erreur par défaut peut être inséré dynamiquement dans les paramètres, par exemple,请输入长度在{0} 到{1} 之间的字符, reportez-vous à | |
| [règleOption.rule] | function|regexp | La fonction de vérification des règles doit renvoyer un boolean .Vous pouvez également écrire directement une expression régulière (s'il s'agit simplement d'une vérification de type régulière). |
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éthode statique : vérification des fonctions
| paramètre | taper | valeur par défaut | décrire |
|---|---|---|---|
| nom de la règle | string | Nom de la règle | |
| valeur | string | Ce qu'il faut vérifier | |
| paramètre | any | Transmis aux paramètres de la règle |
Prend en charge toutes les règles prises en charge par défaut et prend également en charge les règles personnalisées.
// 必填
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 Invite de message d'erreur personnalisée
Vous pouvez en configurer un globalement ou individuellement, ce qui est très flexible.
La priorité est : .checkData(data, onMessage) > new WeValidator({ onMessage }) > WeValidator.onMessage > Détection par défaut
Méthode d'invite de message par défaut : les mini-programmes utilisent showToast par défaut, les navigateurs utilisent alert par défaut et il n'y a aucun traitement côté Nodejs. Il est recommandé de le configurer vous-même.
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 )
} Les scénarios d'utilisation sont les suivants, remarque : lorsque multiCheck est true , il est recommandé d'utiliser onMessage personnalisé , reportez-vous à
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 : '手机号格式不正确'
}
}
} ) ; Afficher le journal des modifications
Si vous trouvez des bugs lors de l'utilisation ou avez de bonnes suggestions, n'hésitez pas à les signaler.
Copyright (c) 2019 ChanceYu
