Plugin de formulaire jQuery EasyUI -Validatebox

jQuery EasyUI 插件Plugins jQuery EasyUI

Remplacer les paramètres par défaut via $.fn.validatebox.defaults.

La validatebox est conçue pour valider les champs de saisie de formulaire. Si l'utilisateur saisit une valeur non valide, elle changera la couleur d'arrière-plan, affichera une icône d'avertissement et un message d'invite. La validatebox peut être intégrée au plugin de formulaire pour empêcher les champs non valides d'être soumis.

Dépendances

  • tooltip

Utilisation

Créer une validatebox à partir du balisage.

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

Créer une validatebox à l'aide de JavaScript.

<input id="vv">

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

Vérifier si le mot de passe et le mot de passe ressaisi sont identiques.

// 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']">

Règles de validation

Les règles de validation sont définies en utilisant les attributs `required` et `validType`. Voici les règles qui ont été implémentées :

  • email : correspond à la règle d'expression régulière pour les e-mails.
  • url : correspond à la règle d'expression régulière d'URL.
  • length[0,100] : autorise de x à y caractères.
  • remote['http://.../action.do','paramName'] : envoie une requête ajax pour valider la valeur, en renvoyant 'true' en cas de succès.

Pour personnaliser une règle de validation, redéfinissez $.fn.validatebox.defaults.rules afin de définir une fonction de validation et un message d'erreur. Par exemple, définissez un type de validation minLength :

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

Vous pouvez maintenant utiliser ce type de validation minLength pour définir un champ de saisie qui nécessite au moins 5 caractères :

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

Propriétés

Name Type Description Default
required booléen Définit si le champ doit être saisi. false
validType string,array Définit le type de validation du champ, tel que email, url, etc. Valeurs possibles :
1. Une chaîne de type de validation, appliquant une seule règle de validation.
2. Un tableau de types de validation, appliquant plusieurs règles de validation. Plusieurs règles de validation sur un seul champ sont disponibles depuis la version 1.3.2.

Exemple de code :
<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 nombre Retarder la validation de la dernière valeur saisie. Cette propriété est disponible depuis la version 1.3.2. 200
missingMessage string Le texte d'invite affiché lorsque la zone de texte est vide. Le champ est obligatoire.
invalidMessage string Le texte d'invite affiché lorsque le contenu de la zone de texte est invalide. null
tipPosition string Définit la position du message d'invite lorsque le contenu de la zone de texte est invalide. Valeurs possibles : 'left', 'right'. Cette propriété est disponible depuis la version 1.3.2. right
deltaX nombre Décalage de l'invite dans la direction X. Cette propriété est disponible depuis la version 1.3.3. 0
novalidate booléen Lorsqu'elle est définie sur true, désactive la validation. Cette propriété est disponible depuis la version 1.3.4. false

Méthodes

Name Parameters Description
destroy none Supprimer et détruire le composant.
validate none Effectuer une validation pour déterminer si le contenu de la zone de texte est valide.
isValid none Appeler la méthode validate et retourner le résultat de la validation, true ou false.
enableValidation none Activer la validation. Cette méthode est disponible depuis la version 1.3.4.
disableValidation none Désactiver la validation. Cette méthode est disponible depuis la version 1.3.4.
jQuery EasyUI 插件Plugins jQuery EasyUI Autres extensions