Copiez le code comme suit :
//Mettez-le dans la fonction(){} de onReady
Ext.QuickTips.init(); //Fournir une fonction d'informations d'invite pour les composants. Les principales informations d'invite du formulaire sont le message d'erreur de la vérification du client.
Ext.form.Field.prototype.msgTarget='side'; //Méthode d'invite, la valeur d'énumération est :
qtip - affiche une astuce lorsque la souris se déplace sur le contrôle ;
titre-Le titre affiché dans le navigateur, mais le résultat du test est le même que celui de qtip ;
sous-affiche un message d'erreur sous le contrôle ;
affiche latéralement une icône d'erreur sur le côté droit du contrôle et affiche une invite d'erreur lorsque la souris pointe sur l'icône Valeur par défaut ;
Le message d'erreur id-[element id] s'affiche dans l'élément HTML de l'identifiant spécifié
1. L'exemple le plus simple : la vérification nulle
Copiez le code comme suit :
//Deux paramètres pour la vérification nulle
allowBlank:false//false ne peut pas être vide, la valeur par défaut est true
blankText:string//Message d'erreur lorsqu'il est vide
le code js est :
Copiez le code comme suit :
var form1 = nouveau Ext.form.FormPanel({
largeur:350,
renduVers : "form1",
titre : "FormPanel",
valeurs par défaut :{xtype:"textfield",inputType:"password"},
articles:[
{fieldLabel:"ne peut pas être vide",
allowBlank:false, //le blanc n'est pas autorisé
blankText:"ne peut pas être vide", //message d'erreur, la valeur par défaut est Ce champ est obligatoire !
identifiant : "test vierge",
}
]
});
2. Utilisez le format vtype pour une vérification simple.
Dans cet exemple de vérification d'e-mail, réécrivez la configuration des éléments du code ci-dessus :
Copiez le code comme suit :
articles:[
{fieldLabel:"ne peut pas être vide",
vtype:"email",//vérification du format de l'e-mail
vtypeText: "Pas une adresse email valide", //message d'erreur, je n'entrerai pas dans la valeur par défaut.
identifiant : "test vierge",
ancre : "90 %"
}
Vous pouvez modifier le vtype ci-dessus avec les vérifications suivantes prises en charge par les vtypes d'extjs suivants par défaut :
//Le type de vtype pris en charge par défaut dans la validation du formulaire
1.alpha //Seules les lettres peuvent être saisies, les autres (comme les chiffres, les symboles spéciaux, etc.) ne peuvent pas être saisies
2.alphanum//Seules des lettres et des chiffres peuvent être saisis, aucune autre saisie n'est autorisée
3.email//vérification de l'e-mail, le format requis est ""
4.url//url vérification du format, le format requis est http://www.baidu.com
3. Vérification avancée du mot de passe personnalisé
Les vérifications précédentes sont toutes fournies par extjs, et nous pouvons également personnaliser les fonctions de vérification.
Copiez le code comme suit :
//Utilisez d'abord la méthode Ext.apply pour ajouter une fonction de vérification de mot de passe personnalisée (vous pouvez également lui donner un autre nom)
Ext.apply(Ext.form.VTypes,{
password:function(val,field){//val fait référence à la valeur de la zone de texte ici, field fait référence à ce composant de zone de texte, tout le monde doit comprendre cette signification
if(field.confirmTo){//confirmTo est notre paramètre de configuration personnalisé, généralement utilisé pour enregistrer la valeur d'identification d'un autre composant
var pwd=Ext.get(field.confirmTo);//Obtenir la valeur de l'identifiant de confirmTo
return (val==pwd.getValue());
}
renvoie vrai ;
}
});
//Configurer les paramètres des éléments
éléments :[{fieldLabel:"Mot de passe",
identifiant : "passe1",
},{
fieldLabel:"Confirmer le mot de passe",
identifiant:"pass2",
vtype:"mot de passe",//Type de vérification personnalisé
vtypeText: "Les deux mots de passe sont incohérents !",
confirmTo:"pass1",//L'identifiant d'un autre composant à comparer
}
4. Utilisez la vérification des expressions régulières
Copiez le code comme suit :
nouveau Ext.form.TextField({
fieldLabel : "Nom",
nom : "nom_auteur",
regex : //[/u4e00-/u9fa5]/, //L'expression régulière est comprise entre /...../. : Seul le chinois peut être saisi.
regexText : "Seul le chinois peut être saisi !", //Message d'erreur d'expression régulière
AllowBlank : false //Cette vérification est toujours valide. Elle ne peut pas être vide.