Exemples de vérification en Javascript
Soit le formulaire suivant :
<form name="f" action="..." onsubmit="return verif()">
Veuillez saisir une valeur <br>
<input type="text" name="T1" id="T1" > <br>
<br>
choisir une couleur <br>
<input type="radio" name="c" id="c1" value="red"> Rouge <br>
<input type="radio" name="c" id="c2" value="green"> Vert <br>
<input type="radio" name="c" id="c3" value="yellow"> Jaune <br>
<br>
Choisir un billet<br>
<input type="radio" name="b" id="b1" value="10"> 10 dinars <br>
<input type="radio" name="b" id="b2" value="20"> 20 dinars <br>
<br>
Choisir vos centres d'intérêt<br>
<input type="checkbox" name="mu" id="mu" value="Musique"> Musique <br>
<input type="checkbox" name="th" id="th" value="Théatre"> Théatre <br>
<input type="checkbox" name="des" id="des" value="Dessin"> Dessin <br>
<br>
Choisir une matière<br>
<select name="matiere" id="matiere">
<option value=""></option>
<option value="m">Math</option>
<option value="ph">Physique</option>
<option value="an">Anglais</option>
</select> <br>
<br>
<input type="submit" value="Valider">
</form>
<script>
function verif() {
// A terminer les vérifications
// .....
// .....
// .....
// .....
}
</script>
1
Quelques traitements sur les zones textes (T1)
// La zone texte « T1 » ne doit pas être vide // La zone texte « T1 » doit contenir 3 caractères
ch = document.getElementById('T1').value ch = document.getElementById('T1').value
if (ch == "") { if (ch.length != 3) {
alert ("le champ ne doit pas être vide"); alert ("le champ doit contenir 3 caractères");
return false return false
} }
// La zone texte « T1 » doit contenir au moins 3 caractères // La zone texte « T1 » doit être numérique
ch = document.getElementById('T1').value ch = document.getElementById('T1').value
if (ch.length < 3) { if (isNaN(ch) == true) {
alert ("le champ doit contenir au moins 3 caractères "); alert ("le champ doit être numériques");
return false return false
} }
// La zone texte « T1 » doit contenir exactement 8 chiffres // La zone texte « T1 » doit être numérique et >=0
ch = document.getElementById('T1').value ch = document.getElementById('T1').value
if ( !(ch.length == 8 && isNaN(ch) == false) ) { if ( !(isNaN(ch) == false && Number(ch) > 0) ) {
alert ("le champ doit contenir 8 chiffres") alert ("le champ doit être numériques supérieur à 0");
return false return false
} }
// La zone texte « T1 » doit être formée que par des lettres // La zone texte « T1 » doit être formée que par des lettres
alphabétiques alphabétiques ou espace
ch = document.getElementById('T1').value ch = document.getElementById('T1').value
for(i=0 ; i < ch.length ; i++) { for(i=0; i < ch.length ;i++) {
if ( if (
!( !(
ch[i].toUpperCase() >= "A" && ch[i].toUpperCase() >= "A" &&
ch[i].toUpperCase() <= "Z" ch[i].toUpperCase() <= "Z"
) || ch[i] == " "
) )
{ )
alert ("le champ doit être alphabétiques"); {
return false alert ("le champ doit contenir des lettres " +
} " alphabétiques ou espace ");
} return false
}
}
// La zone texte « T1 » doit contenir le caractère @ // Deux fonction indisponsables
ch = document.getElementById('T1').value function alphanumerique(ch) {
ch=ch.toUpperCase();
if (ch.indexOf("@") == -1) { i=0;
alert ("le champ doit contenir le caractère @"); verife=true;
return false do {
} if (((ch[i] >= "A") && (ch[i] <= "Z")) || ((ch[i] >= "0") &&
(ch[i]<="9")))
{i++;}
else
{verife=false;}
} while ((verife) && (i < ch.length));
return verife;
}
function alphabetique(ch)
{
ch=ch.toUpperCase();
i=0
while (ch[i] >= "A" && ch[i] <= "Z" && i < ch.length)
{i++;}
return i == ch.length;
}
2
Traitement sur le premier caractère de la zone texte « T1 » :
// Le premier caractère de la zone texte « T1 » doit être une // Le premier caractère de la zone texte « T1 » doit être une lettre
lettre majuscule (A .. Z) minuscule (a..z)
ch = document.getElementById('T1').value ch = document.getElementById('T1').value
if ( (ch[0] < "A") || (ch[0] > "Z") ) { if ( (ch[0] < "a") || (ch[0] > "z") ) {
alert ("Le premier caractère doit être une lettre majuscule") ; alert ("Le premier caractère doit être une lettre minuscule");
return false return false
} }
// Le premier caractère de la zone texte « T1 » doit être « + » ou // Le premier caractère de la zone texte « T1 » doit être un chiffre
«-»
ch = document.getElementById('T1').value
ch = document.getElementById('T1').value
if (isNaN(ch[0]) == true) {
if ( !( ch[0] == "+" || ch.charAt(0) == "-" ) ) { alert("Le premier caractère doit être un chiffre");
alert ("Le premier caractère doit être + ou - "); return false
return false }
}
// Le premier caractère de la zone texte « T1 » doit être une // Le premier caractère de la zone texte « T1 » doit être une lettre
lettre voyelle alphabétique
ch = document.getElementById('T1').value ch = document.getElementById('T1').value
premier_carac = ch[0].toUpperCase( ) if (
voyelles = "AEIOUY"; !(
ch[0].toUpperCase() >= "A" &&
if (voyelles.indexOf(premier_carac) == -1 ) { ch[0].toUpperCase() <= "Z"
alert ("Le premier caractère doit être une voyelle"); )
return false )
} {
alert ("le premier caractère doit être alphabétiques");
return false
}
Quelques Traitements sur les zones Radio couleur
// Couleur obligatoire // Afficher la valeur de la couleur choisie
c1 = document.getElementById('c1') c1 = document.getElementById('c1')
c2 = document.getElementById('c2') c2 = document.getElementById('c2')
c3 = document.getElementById('c3') c3 = document.getElementById('c3')
if ( if (c1.checked){
c1.checked == false && alert ("la valeur de la couleur choisie est "+c1.value)
c2.checked == false && }
c3.checked == false
){ if (c2.checked){
alert ("Il faut choisir une couleur") alert ("la valeur de la couleur choisie est "+c2.value)
return false }
}
if (c3.checked){
alert ("la valeur de la couleur choisie est "+c3.value)
}
3
Quelques Traitements sur les zones case à cocher centres d'intérêt :
// Cocher au moins un centre d'intérêt // Afficher la liste des valeurs des centres d'intérêt cochés
mu = document.getElementById('mu')
mu = document.getElementById('mu')
th = document.getElementById('th')
th = document.getElementById('th')
des = document.getElementById('des') des = document.getElementById('des')
if ( msg = ''
mu.checked == false &&
if (mu.checked){
th.checked == false &&
des.checked == false msg = msg + mu.value + " "
){ }
if (th.checked){
alert ("Il faut choisir un centre d'interet")
msg = msg + th.value + " "
return false
} }
if (des.checked){
msg = msg + des.value + " "
}
if(msg != ""){
alert ("les valeurs des centres d'interet cochés sont : " + msg)
}
else{
alert("Aucun centre d'intérêt coché")
}
Quelques Traitements sur les zones listes déroulantes matière :
// matière obligatoire // Afficher une matière
liste = document.getElementById('matiere') liste = document.getElementById('matiere')
indice_selection = liste.selectedIndex
if(liste.selectedIndex == 0){
alert ("la matière est obligatoire"); if (indice_selection == 0){
return false alert ("il faut sélectionner une matière");
} }
else{
Ou bien alert (
"la matière sélectionner est " + liste.[indice_selection].text + ". Sa
liste = document.getElementById('matiere') valeur est " + liste.[indice_selection].value +
if(liste.value == ''){ ". Son indice est " + indice_selection
alert ("la matière est obligatoire"); );
return false }
}
