interface Webjs tutorielLa vérification du formulaire jquery réussit le formulaire de vérification de classe n'est pas vide_jquery
Lors du développement d'un système, certaines données de formulaire sont souvent requises. Si jQuery est utilisé pour vérifier via ID, cela affectera non seulement l'efficacité, mais entraînera également des omissions, ce qui rendra difficile la maintenance ultérieure.
Ce chapitre expliquera comment utiliser jQuery pour effectuer une vérification unifiée en configurant des classes pour les formulaires. (L'ID ne peut être utilisé qu'une seule fois sur une page ; la classe peut être référencée plusieurs fois)
1 : Ajoutez une classe à l'entrée. Le nom peut être défini à volonté, mais chaque entrée doit être cohérente. Dans ce chapitre, calss est défini sur noNull. (Si l'entrée a déjà un attribut de classe, il peut être ajouté directement après)
2 : Ajoutez un attribut à l'entrée pour obtenir le champ via jquery plus tard et utilisez-le comme invite. L'attribut d'invite de cas dans ce chapitre est notNull.
3 : Utilisez jQuery pour parcourir tous les formulaires avec calss noNull dans la page et vérifiez si elle est vide, obtenez le champ notNull et fournissez une invite vide.
Pour plus de détails sur la façon de le configurer, veuillez vous référer au cas ci-dessous. Ce chapitre explique les types de saisie, radio, sélection, case à cocher et autres.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<form>
<!-- input -->
<div>
姓名: <input type="text" name="name" notNull="姓名" class="form-control noNull">
</div>
<br>
<!-- radio -->
<div>
性别:
男<input type="radio" name="sex" value="0" class="noNull" notNull="性别">
女<input type="radio" name="sex" value="1" >
</div>
<br>
<!-- select -->
<div>
年龄：
<select name="age" class="noNull" notNull="年龄">
<option value ="">请选择</option>
<option value ="1">1</option>
<option value ="2">2</option>
</select>
</div>
<br>
<!-- checkbox -->
<div>
兴趣：
打球<input type="checkbox" name="hobby" value="1" class="noNull" notNull="兴趣">
唱歌<input type="checkbox" name="hobby" value="2">
跳舞<input type="checkbox" name="hobby" value="3">
</div>
<br>
<button type="button" class="btn-c" onclick="bubmi()">保存</button>
</form>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function bubmi(){
$(".noNull").each(function(){
var name = $(this).attr("name");
if($(this).val()==""){
alert($(this).attr('notNull')+"不能为空");return false;
}
if($(this).attr("type")=="radio"){
if ($("input[name='"+name+"']:checked").size() < 1){
alert($(this).attr('notNull')+"不能为空!");
return false;
}
}
if($(this).attr("type")=="checkbox"){
if ($('input[name="'+name+'"]:checked').size() < 1){
alert($(this).attr('notNull')+"不能为空!");
return false;
}
}
})
}
</script>
</body>
</html>
Ce qui suit vous présente le plug-in de vérification jquery.validate.js
jquery.validate.js est un plug-in de vérification sous jquery. Grâce aux avantages de jquery, nous pouvons vérifier rapidement certaines entrées courantes et étendre nos propres méthodes de vérification.
Par exemple, il existe un tel formulaire :
<form id="signupForm" method="get" action=""> <fieldset> <legend>Validating a complete form</legend> <p> <label for="firstname">Firstname</label> <input id="firstname" name="firstname" class="required"/> </p> <p> <label for="lastname">Lastname</label> <input id="lastname" name="lastname" /> </p> <p> <label for="username">Username</label> <input id="username" name="username" /> </p> <p> <label for="password">Password</label> <input id="password" name="password" type="password" /> </p> <p> <label for="confirm_password">Confirm password</label> <input id="confirm_password" name="confirm_password" type="password" /> </p> <p> <label for="email">Email</label> <input id="email" name="email" /> </p> <p> <input class="submit" type="submit" value="Submit"/> </p> </fieldset> </form>
Dans ce formulaire, il y a le prénom, le nom, le nom d'utilisateur, le mot de passe, la confirmation du mot de passe et l'email. Ils doivent tous être non vides et l'e-mail doit être une adresse correctement formatée, le mot de passe de confirmation et le mot de passe cohérents. La façon la plus simple d'utiliser la validation jQuery consiste à introduire deux fichiers js, jquery.js et jquery validation.js. Ajoutez ensuite la classe à l'entrée respectivement :
<input id="firstname" name="firstname" class="required"/> <input id="lastname" name="lastname" class="required"/> <input id="username" name="username" class="required"/> <input id="password" name="password" type="password" class="required"/> <input id="confirm_password" name="confirm_password" type="password" class="required" equalTo="#password"/> <input id="email" name="email" class="required email"/>
Ce qui suit répertorie les vérifications par défaut fournies avec validate
obligatoire : "Champ obligatoire",
distant : "Veuillez corriger ce champ",
email : "Veuillez saisir le format correct de votre email",
url : "Veuillez saisir une URL légale",
date : "Veuillez saisir une date légale",
dateISO : "Veuillez saisir une date valide (ISO).",
numéro : "Veuillez saisir un numéro légal",
chiffres : "Seuls des nombres entiers peuvent être saisis",
carte de crédit : "Veuillez saisir un numéro de carte de crédit valide",
equalTo : "Veuillez saisir à nouveau la même valeur",
accepter : "Veuillez saisir une chaîne avec un suffixe légal",
maxlength: jQuery.format("Veuillez saisir une chaîne d'une longueur maximale de {0}"),
minlength : jQuery.format("Veuillez saisir une chaîne d'une longueur d'au moins {0}"),
rangelength : jQuery.format("Veuillez saisir une chaîne d'une longueur comprise entre {0} et {1}"),
range : jQuery.format("Veuillez saisir une valeur comprise entre {0} et {1}"),
max : jQuery.format("Veuillez saisir une valeur allant jusqu'à {0}"),
min : jQuery.format("Veuillez saisir une valeur minimale de {0}")
Ensuite, dans l'événement read du document, ajoutez la méthode suivante :
<script>
$(document).ready(function(){
$("#signupForm").validate();
}
</script>
De cette façon, lorsque le formulaire sera soumis, il sera vérifié en fonction de la classe spécifiée par l'entrée. En cas d'échec, la soumission du formulaire sera bloquée. Et les informations d'invite sont affichées derrière l'entrée.
Cependant, cela fait mal car les règles de validation envahissent notre code html. Une autre façon consiste à utiliser des « règles ». Nous supprimons les classes de vérification pour la saisie. Modifiez ensuite le code de réponse à l'événement prêt du document :
$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
}
});
})
De cette façon, le même effet peut être obtenu.
Ensuite, la question suivante est que le message d'erreur affiché est celui par défaut. Nous devons utiliser une invite personnalisée :
$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填项",
lastname:"必填项",
username:"必填项",
password:"必填项",
confirm_password:{
required:"必填项",
equalTo:"密码不一致"
},
email:{
required:"必填项",
email:"格式有误"
}
}
});
})
Si vous souhaitez également afficher un style particulier sur le message d'erreur (par exemple, la police est rouge), vous pouvez ajouter :
<style type="text/css">
#signupForm label.error {
padding-left: 16px;
margin-left: 2px;
color:red;
background: url(img/unchecked.gif) no-repeat 0px 0px;
}
</style>
Continuer à ajouter des règles de validation pour la longueur du mot de passe saisi :
$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:{
required:true,
minlength:4,
maxlength:15
},
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填项",
lastname:"必填项",
username:"必填项",
password:{
required:"必填项",
minlength:jQuery.format("密码长度不少于{0}位"),
maxlength:jQuery.format("密码长度不超过{0}位")
},
confirm_password:{
required:"必填项",
equalTo:"密码不一致"
},
email:{
required:"必填项",
email:"格式有误"
}
}
});
})
Utiliser la télécommande
Vous pouvez spécifier la méthode d'effet de déclenchement via un événement (les valeurs facultatives incluent keyup (chaque fois qu'une touche est enfoncée), flou (lorsque le contrôle perd le focus), s'il n'est pas spécifié, il ne se déclenchera que lorsque le bouton de soumission est pressé)
$(document).ready(function(){
$("#signupForm").validate({
event:"keyup" || "blur"
})
})
Si vous spécifiez debug comme vrai, le formulaire ne sera pas soumis et ne pourra être utilisé qu'à des fins de vérification (la valeur par défaut est la soumission) et peut être utilisé pour le débogage
$(document).ready(function(){
$("#signupForm").validate({
debug:true
})
})
Si vous devez effectuer un traitement personnalisé avant de soumettre, utilisez le paramètre submitHandler
$(document).ready(function(){
$("#signupForm").validate({
SubmitHandler:function(){
alert("success");
}
})
})
JavaScript: Explorer la polyvalence d'un langage WebApr 11, 2025 am 12:01 AMJavaScript est le langage central du développement Web moderne et est largement utilisé pour sa diversité et sa flexibilité. 1) Développement frontal: construire des pages Web dynamiques et des applications à une seule page via les opérations DOM et les cadres modernes (tels que React, Vue.js, Angular). 2) Développement côté serveur: Node.js utilise un modèle d'E / S non bloquant pour gérer une concurrence élevée et des applications en temps réel. 3) Développement des applications mobiles et de bureau: le développement de la plate-forme multiplateuse est réalisé par réact noral et électron pour améliorer l'efficacité du développement.
L'évolution de JavaScript: tendances actuelles et perspectives d'avenirApr 10, 2025 am 09:33 AMLes dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.
Démystifier javascript: ce qu'il fait et pourquoi c'est importantApr 09, 2025 am 12:07 AMJavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.
Python ou JavaScript est-il meilleur?Apr 06, 2025 am 12:14 AMPython est plus adapté à la science des données et à l'apprentissage automatique, tandis que JavaScript est plus adapté au développement frontal et complet. 1. Python est connu pour sa syntaxe concise et son écosystème de bibliothèque riche, et convient à l'analyse des données et au développement Web. 2. JavaScript est le cœur du développement frontal. Node.js prend en charge la programmation côté serveur et convient au développement complet.
Comment installer JavaScript?Apr 05, 2025 am 12:16 AMJavaScript ne nécessite pas d'installation car il est déjà intégré à des navigateurs modernes. Vous n'avez besoin que d'un éditeur de texte et d'un navigateur pour commencer. 1) Dans l'environnement du navigateur, exécutez-le en intégrant le fichier HTML via des balises. 2) Dans l'environnement Node.js, après avoir téléchargé et installé Node.js, exécutez le fichier JavaScript via la ligne de commande.
Comment envoyer des notifications avant le début d'une tâche en quartz?Apr 04, 2025 pm 09:24 PMComment envoyer à l'avance des notifications de tâches en quartz lors de l'utilisation du minuteur de quartz pour planifier une tâche, le temps d'exécution de la tâche est défini par l'expression CRON. Maintenant...
Dans JavaScript, comment obtenir des paramètres d'une fonction sur une chaîne prototype dans un constructeur?Apr 04, 2025 pm 09:21 PMComment obtenir les paramètres des fonctions sur les chaînes prototypes en JavaScript dans la programmation JavaScript, la compréhension et la manipulation des paramètres de fonction sur les chaînes prototypes est une tâche commune et importante ...
Quelle est la raison de la défaillance du déplacement de style dynamique Vue.js dans le WECHAT Mini Program WebView?Apr 04, 2025 pm 09:18 PMAnalyse de la raison pour laquelle la défaillance du déplacement de style dynamique de l'utilisation de Vue.js dans la vue Web de l'applet WeChat utilise Vue.js ...
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
mPDF
mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),
SublimeText3 Linux nouvelle version
Dernière version de SublimeText3 Linux
Dreamweaver Mac
Outils de développement Web visuel
SublimeText3 version anglaise
Recommandé : version Win, prend en charge les invites de code !
DVWA
Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel
