jQuery EasyUI Formular-Plugin -Validatebox

jQuery EasyUI 插件jQuery EasyUI Plugins

Standardeinstellungen über $.fn.validatebox.defaults überschreiben.

Die Validatebox ist dafür konzipiert, Formulareingabefelder zu validieren. Wenn der Benutzer einen ungültigen Wert eingibt, ändert sie die Hintergrundfarbe, zeigt ein Warnsymbol und eine Hinweismeldung an. Die Validatebox kann in das Formular-Plugin integriert werden, um zu verhindern, dass ungültige Felder übermittelt werden.

Abhängigkeiten

  • tooltip

Nutzung

Erstellen Sie eine Validatebox aus Markup.

<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'">

Erstellen Sie eine validatebox mit JavaScript.

<input id="vv">

$('#vv').validatebox({
    required: true,
    validType: 'email'
});

Prüfen Sie, ob das Passwort und das erneut eingegebene Passwort identisch sind.

// extend the 'equals' rule
$.extend($.fn.validatebox.defaults.rules, {
    equals: {
        validator: function(value,param){
            return value == $(param[0]).val();
        },
        message: 'Field do not match.'
    }
});

<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true">
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"
    required="required" validType="equals['#pwd']">

Validierungsregeln

Validierungsregeln werden mithilfe der Attribute `required` und `validType` definiert. Hier sind die Regeln, die implementiert wurden:

  • email: entspricht der Regel des regulären Ausdrucks für E-Mail.
  • url: entspricht der Regel des regulären Ausdrucks für URLs.
  • length[0,100]: erlaubt von x bis y Zeichen.
  • remote['http://.../action.do','paramName']: sendet eine ajax-Anfrage, um den Wert zu validieren, und gibt bei Erfolg 'true' zurück.

Um eine Validierungsregel anzupassen, überschreiben Sie $.fn.validatebox.defaults.rules, um eine Validierungsfunktion und eine Fehlermeldung zu definieren. Definieren Sie beispielsweise einen Validierungstyp minLength:

$.extend($.fn.validatebox.defaults.rules, {
    minLength: {
        validator: function(value, param){
            return value.length >= param[0];
        },
        message: 'Please enter at least {0} characters.'
    }
});

Jetzt können Sie diesen Validierungstyp minLength verwenden, um ein Eingabefeld zu definieren, das mindestens 5 Zeichen erfordert:

<input class="easyui-validatebox" data-options="validType:'minLength[5]'">

Eigenschaften

Name Type Beschreibung Standard
required boolesch Legt fest, ob das Feld eingegeben werden muss. false
validType string,array Definiert den Validierungstyp des Feldes, wie z. B. email, url usw. Mögliche Werte:
1. Ein Validierungstyp-String, der eine einzelne Validierungsregel anwendet.
2. Ein Array von Validierungstypen, das mehrere Validierungsregeln anwendet. Mehrere Validierungsregeln für ein einzelnes Feld sind seit Version 1.3.2 verfügbar.

Codebeispiel:
<input class="easyui-validatebox" data-options="required:true,validType:'url'">
<input class="easyui-validatebox" data-options="
    required:true,
    validType:['email','length[0,20]']
">
null
delay number Verzögert die Validierung des letzten Eingabewerts. Diese Eigenschaft ist seit Version 1.3.2 verfügbar. 200
missingMessage string Der Hinweistext, der angezeigt wird, wenn das Textfeld leer ist. Das Feld ist erforderlich.
invalidMessage string Der Hinweistext, der angezeigt wird, wenn der Inhalt des Textfelds ungültig ist. null
tipPosition string Definiert die Position der Hinweismeldung, wenn der Inhalt des Textfelds ungültig ist. Mögliche Werte: 'left', 'right'. Diese Eigenschaft ist seit Version 1.3.2 verfügbar. right
deltaX number Der Prompt-Offset in X-Richtung. Diese Eigenschaft ist seit Version 1.3.3 verfügbar. 0
novalidate boolesch Wenn auf true gesetzt, wird die Validierung deaktiviert. Diese Eigenschaft ist seit Version 1.3.4 verfügbar. false

Methoden

Name Parameters Beschreibung
destroy none Entfernen und zerstören Sie die Komponente.
validate none Führen Sie eine Validierung durch, um festzustellen, ob der Inhalt der Textbox gültig ist.
isValid none Rufen Sie die validate-Methode auf und geben Sie das Validierungsergebnis zurück, true oder false.
enableValidation none Validierung aktivieren. Diese Methode ist seit Version 1.3.4 verfügbar.
disableValidation none Validierung deaktivieren. Diese Methode ist seit Version 1.3.4 verfügbar.
jQuery EasyUI 插件jQuery EasyUI Plugins Weitere Erweiterungen