we validator Download - we validator Quellcode herunterladen

we validator

AI-Quellcode

v2.1.17

Herunterladen

Wir-Validator

Es gibt Unterschiede zwischen der 2.x- und der 1.x-Version. Wenn Sie weiterhin die alte Version verwenden, können Sie die 1.x-Version überprüfen. Wenn Sie auf 2.x aktualisieren möchten, lesen Sie bitte zuerst die Upgrade-Anleitung. Es wird empfohlen, Version 2.x zu verwenden.

Ein einfaches und flexibles Formularvalidierungs-Plug-in, das Miniprogramme, Browser und Nodejs unterstützt. Das Miniprogramm unterstützt: WeChat, Alipay, Baidu Smart und ByteDance. Das Miniprogramm fordert standardmäßig zur Verwendung showToast auf.

API-Dokumentation |. Beispiele, wenn Sie? Klicken Sie einfach auf ★Stern .

Merkmale

Einfach und flexibel zu verwenden, unabhängig von einem Framework
Es unterstützt sowohl die native Miniprogrammmethode als auch die Verwendung von Miniprogramm-Frameworks wie mpvue, wepy und taro.
Unterstützt die Verwendung auf der Browser- und Nodejs-Seite
Unterstützen Sie benutzerdefinierte Regeln
Unterstützt benutzerdefinierte Eingabeaufforderungen für Fehlermeldungen
Unterstützt das dynamische Hinzufügen oder Entfernen einer Feldüberprüfung
Unterstützt die unabhängige Überprüfung einer oder mehrerer Feldregeln
Unterstützung der Funktionsüberprüfung
Unterstützt die gleichzeitige Überprüfung mehrerer Felder und zeigt Fehler an
Unterstützt standardmäßig allgemeine Verifizierungsregeln

Installieren

Verwenden Sie npm:

npm install we-validator --save

Verwenden Sie cdn:

 < script src =" https://unpkg.com/we-validator/dist/we-validator.min.js " > </ script >

verwenden

Im Folgenden wird die Verwendung des WeChat-Miniprogramms beschrieben. Andere Miniprogramme sind ähnlich

Klicken Sie hier, um Kastanien anzusehen?

 < 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的字符串'
                } ,
            } ,
        } )
    } ,
} )

Beispiele

Sie können auch auf die entsprechenden Beispiele unter dem aktuellen Projekt verweisen

So verwenden Sie das native WeChat-Miniprogramm
So verwenden Sie mpvue
So verwenden Sie einen Webbrowser
So verwenden Sie die Nodejs-Seite
Komplexe Verifizierungsfälle – benutzerdefinierte Regeln – Feldverifizierung dynamisch hinzufügen

API

neuer WeValidator (Optionen)
- .checkData(data, onMessage) überprüft Daten und zeigt eine Fehlermeldung an
- .checkFields(data, columns, onMessage) Überprüft Daten, es wird eine Fehlermeldung angezeigt und nur die entsprechenden Felder werden überprüft
- .isValid(Daten, Felder) überprüft Daten, es wird keine Fehlermeldung angezeigt und bestimmte Felder können einzeln überprüft werden
- .addRules(options) Feldüberprüfung dynamisch hinzufügen
- .removeRules(fields) entfernt dynamisch die Feldvalidierung

Statische API

WeValidator
- .addRule(ruleName, RuleOption) Benutzerdefinierte Regeln hinzufügen
- .checkValue(ruleName, value, param) Funktionsüberprüfung, überprüfen Sie einen bestimmten Inhalt einzeln
- .onMessage legt die globale Fehlermeldungsanzeige fest

Standardmäßig unterstützte Regeln

Hinweis: Die konfigurierten Regeln werden nur überprüft, wenn die nicht erforderlichen Felder Werte enthalten.

Regel	beschreiben	Standard-Eingabeaufforderung
`required: true`	Erforderlich	Dieses Feld ist erforderlich
`pattern: /^d+$/`	Regulärer General	Entspricht dieser Validierungsregel nicht
`email: true`	E-Mail-Format	Bitte geben Sie eine gültige E-Mail-Adresse ein
`mobile: true`	11-stellige Mobiltelefonnummer	Bitte geben Sie Ihre 11-stellige Mobiltelefonnummer ein
`tel: true`	Festnetznummer zum Beispiel: 010-1234567, 0551-1234567	Bitte geben Sie Ihre Festnetznummer ein
`url: true`	URL	Bitte geben Sie eine gültige URL ein
`idcard: true`	ID-Nummer	Bitte geben Sie einen gültigen 18-stelligen Personalausweis ein
`equalTo: 'field'`	Feldwertüberprüfung, zum Beispiel: Passwort und Passwort bestätigen, siehe	Der Eingabewert muss mit dem Feld `field` identisch sein
`notEqualTo: 'field'`	Feldwerte können nicht gleich sein. Die Überprüfung ist das Gegenteil von `equalTo`	Der Eingabewert darf nicht mit `field` identisch sein
`contains: 'str'`	Ob es ein bestimmtes Zeichen enthält	Der Eingabewert muss `str` enthalten
`notContains: 'str'`	darf bestimmte Zeichen nicht enthalten	Der Eingabewert darf keinen `str` enthalten
`length: 5`	Die Länge der Zeichenfolge	Bitte geben Sie `5` Zeichen ein
`minlength: 2`	Mindestlänge der Zeichenfolge	Es sind mindestens `2` Zeichen erforderlich
`maxlength: 6`	Maximale Länge der Zeichenfolge	Sie können bis zu `6` Zeichen eingeben
`rangelength: [2, 6]`	eine Zeichenfolge mit einem bestimmten Längenbereich	Bitte geben Sie eine Länge zwischen `2` und `6` Zeichen ein
`number: true`	Nummer	Bitte geben Sie eine gültige Nummer ein
`digits: true`	positive ganze Zahl	Es können nur positive Ganzzahlen eingegeben werden
`integer: true`	Positive oder negative Ganzzahl	Es können nur ganze Zahlen eingegeben werden
`min: 3`	Eine Zahl größer als eine bestimmte Zahl (die Mindestzahl ist begrenzt), Sie können auch Feldwerte vergleichen, siehe	Bitte geben Sie eine Zahl größer als `3` ein
`max: 9`	Eine Zahl kleiner als eine bestimmte Zahl (die maximale Zahl kann nur eine bestimmte Zahl sein), Sie können auch Feldwerte vergleichen	Bitte geben Sie eine Zahl kleiner als `9` ein
`range: [3, 9]`	Zahlen größer als und kleiner als	Bitte geben Sie eine Zahl größer als `3` und kleiner als `9` ein
`chinese: true`	Chinesische Schriftzeichen	Es können nur chinesische Schriftzeichen eingegeben werden
`minChinese: 3`	Mindestanzahl chinesischer Schriftzeichen	Geben Sie mindestens `3` chinesische Schriftzeichen ein
`maxChinese: 9`	Maximale Anzahl chinesischer Schriftzeichen	Geben Sie bis zu `9` chinesische Zeichen ein
`rangeChinese: [3, 9]`	Wie viele chinesische Schriftzeichen sind größer als und kleiner als?	Es können nur `3` bis `9` chinesische Zeichen eingegeben werden
`date: true`	Datum ( `new Date(value)` wird standardmäßig zur Überprüfung verwendet)	Bitte geben Sie ein gültiges Datum ein
`dateISO: true`	Datum (ISO-Standardformat) Zum Beispiel: 19.09.2019, 19.09.2019	Bitte geben Sie ein gültiges Datum ein (ISO-Standardformat)
`ipv4: true`	IPv4-Adresse	Bitte geben Sie eine gültige IPv4-Adresse ein
`ipv6: true`	IPv6-Adresse	Bitte geben Sie eine gültige IPv6-Adresse ein

neuer WeValidator (Optionen)

Instanziieren

Gibt zurück : object – validatorInstance

Parameter	Typ	Standardwert	beschreiben
Optionen	`object`
[Optionen.Regeln]	`object`		Regeln zur Validierung von Feldern
[Optionen.Nachrichten]	`object`		Fehlermeldung zum Validierungsfeld
[options.onMessage]	`function`		Der Anzeigemodus für Fehlermeldungen erkennt die Umgebung standardmäßig automatisch. Das Miniprogramm verwendet standardmäßig `showToast` Gewöhnliche Webbrowser verwenden standardmäßig `alert` Die Nodejs-Seite führt keine Verarbeitung durch, es wird empfohlen, sie selbst zu konfigurieren, Details
[options.multiCheck]	`boolean`	`false`	Ob mehrere Felder überprüft werden sollen, wird verwendet, wenn mehrere Felder gleichzeitig überprüft werden müssen und Fehlermeldungen angezeigt werden

Klicken Sie hier, um Kastanien anzusehen?

 const WeValidator = require ( 'we-validator' )

new WeValidator ( {
    rules : {
        username : {
            required : true
        } ,
        phoneno : {
            required : true ,
            mobile : true
        }
    } ,
    messages : {
        username : {
            required : '请输入用户名'
        } ,
        phoneno : {
            required : '请输入手机号' ,
            mobile : '手机号格式不正确'
        }
    }
} )

.checkData(data, onMessage)

Überprüfen Sie die Daten, Fehlermeldungen werden angezeigt und alle Feldregeln werden überprüft

Rückgabe : boolean

Parameter	Typ	Standardwert	beschreiben
Daten	`object`		Formulardaten, die überprüft werden müssen
onMessage	`function`		Benutzerdefinierte Fehlermeldungsaufforderung, Details

.checkFields(Daten, Felder, onMessage)

Bei der Überprüfung der Daten wird eine Fehlermeldung angezeigt. Als Referenz werden nur die entsprechenden Felder überprüft.

Wird normalerweise verwendet, um eine oder mehrere Feldregeln einzeln zu überprüfen

Rückgabe : boolean

Parameter	Typ	beschreiben
Daten	`object`	Formulardaten, die überprüft werden müssen
Felder	`array`	Verifizierungsfeldregeln, erforderlich. Zum Beispiel: `['phoneNo']` prüft nur alle Regeln für dieses Feld `['phoneNo:required']` Überprüft nur die `required` Regeln dieses Feldes `['phoneNo:required,mobile']` prüft nur die `required` und `mobile` Regeln dieses Feldes `['phoneNo', 'code']` prüft nur alle Regeln dieser beiden Felder
onMessage	`function`	Benutzerdefinierte Fehlermeldungsaufforderung, Details

.isValid(Daten, Felder)

Überprüfen Sie, ob die Daten gültig sind und keine Fehlermeldung angezeigt wird

Verwendungsszenarien, zum Beispiel: Szenarien, in denen bestimmte Felder in einem Formular überprüft werden und erst nach dem Klicken auf die Schaltfläche als Referenz angeklickt werden können.

Rückgabe : boolean

Parameter	Typ	Standardwert	beschreiben
Daten	`object`		Formulardaten, die überprüft werden müssen
Felder	`array`		Die zu prüfenden Felder werden standardmäßig nicht geprüft. Sofern vorhanden, werden `.checkFields(data, fields)` die entsprechenden Feldregeln geprüft.

.addRules(Optionen)

Feldüberprüfung und Referenz dynamisch hinzufügen

Parameter	Typ	Standardwert	beschreiben
Optionen	`object`		Identisch mit `new WeValidator(options)` , Details

Klicken Sie hier, um Kastanien anzusehen?

 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 : '手机号格式不正确'
        }
    }
} )

.removeRules(fields)

Feldvalidierung und Referenz dynamisch entfernen

Parameter	Typ	Standardwert	beschreiben
Felder	`array`		Formularfelder, die aus der Validierung entfernt werden müssen

 validatorInstance . removeRules ( [ 'username' ] )

WeValidator.addRule(ruleName, RuleOption)

Statische Methode: Benutzerdefinierte Regeln hinzufügen, siehe

Parameter	Typ	beschreiben
Regelname	`string`	Regelname
RegelOption	`object`	Regelkonfiguration
[ruleOption.message]	`string`	Der Standardtext der Fehlermeldung kann dynamisch in Parameter eingefügt werden.`请输入长度在{0} 到{1} 之间的字符`, siehe
[ruleOption.rule]	`function\|regexp`	Die Regelüberprüfungsfunktion muss einen `boolean` zurückgeben. Sie können einen regulären Ausdruck auch direkt schreiben (wenn es sich nur um eine reguläre Typüberprüfung handelt).

Klicken Sie hier, um Kastanien anzusehen?

 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' )

WeValidator.checkValue(ruleName, value, param)

Statische Methode: Funktionsüberprüfung

Parameter	Typ	beschreiben
Regelname	`string`	Regelname
Wert	`string`	Was muss überprüft werden
param	`any`	An Regelparameter übergeben

Unterstützt alle standardmäßig unterstützten Regeln und unterstützt auch benutzerdefinierte Regeln.

 // 必填
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

WeValidator.onMessage

Benutzerdefinierte Fehlermeldungsaufforderung

Sie können eine global oder einzeln konfigurieren, was sehr flexibel ist.

Die Priorität ist: .checkData(data, onMessage) > new WeValidator({ onMessage }) > WeValidator.onMessage > Standarderkennung

Standardmethode für Nachrichtenaufforderungen: Miniprogramme verwenden standardmäßig showToast , Browser verwenden standardmäßig alert und es gibt keine Verarbeitung auf der Nodejs-Seite. Es wird empfohlen, sie selbst zu konfigurieren.

Klicken Sie hier, um Kastanien anzusehen?

 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 )
}

Überprüfen Sie mehrere Felder gleichzeitig und zeigen Sie Fehler an

Die Verwendungsszenarien lauten wie folgt. Hinweis: Wenn multiCheck true ist, wird empfohlen, benutzerdefiniertes onMessage zu verwenden , siehe

Wir-Validator

Klicken Sie hier, um Kastanien anzusehen?

 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 : '手机号格式不正确'
      }
  }
} ) ;