codice:
<html>
<head>
<meta http-equiv="Content-type"
content="text/html; charset=iso-8859-1" />
<title> </title>
<style type="text/css">
.input_Animali {
border: 1px solid #660000;
font-size: 11px;
font-family: "Courier New",Courier,monospace;
font-weight: normal;
color: #990000;
}
</style>
<script type="text/javascript">
function Animale(tipo,da,a) {
//il valore deve essere numerico
var num = parseInt(tipo.value)
var cursor;
//rilevo gli input del form
var imput = document.getElementsByTagName('input');
//eseguo un ciclo sul form 
for(var i=0; i<imput.length; i++){
//verifico che l'input abbia la classe corretta e che il valore immesso sia tra quello specificato
if ((imput[i].className=='input_animali')&&(num < da) || (num > a)){ 
//imposto il cursore
cursor = true;
//Avviso che input è sbagliato 
alert('Please enter numbers only between '+da+' and '+a);
//svuoto il campo del valore immesso errato
tipo.value="";
//esco dal ciclo
break;
}
}
//temporizzo il "cursore" per farlo tornare al campo precedente
setTimeout(function(){if(cursor)tipo.focus()},500)
}
</script>
</head>
<body>
Quanti cani hai? <input id="cane" class="input_animali" name="cane" onblur="Animale(this, 1, 180)" type="text" />
Quanti gatti hai? <input id="gatto" class="input_animali" name="gatto" onblur="Animale(this, 90, 140)" type="text" />
</body>
</html>
Questo è un esempio funzionante con due campi ma puoi aggiungerne quanti ne vuoi, modificando nome e id dell'input e di specificare la classe "input_animali" e nella funzione il range "10 > 30" che deve rilevare senza modificare o aggiungere niente nella funzione tipo:
Quanti pesci hai? <input id="pesci" class="input_animali" name="pesci" onblur="Animale(this, 70, 130)" type="text" />