javascript - Comment js détermine-t-il que la valeur d'entrée est un nombre non inférieur ou égal à 0, sans utiliser d'alerte, mais en utilisant une police rouge sur la même ligne pour inviter l'utilisateur

Question

Comment js détermine-t-il que la valeur d'entrée est un nombre, ni inférieur ni égal à 0, et peut être une valeur décimale. Si vous n'êtes pas éligible, 在%后面以红色字提示用户, TKS !

Answer 1

Déterminez si le focus est dans l'entrée (ou transmettez l'événement focus exit)
Ensuite, transmettez la valeur à la classe de méthode js pour jugement en fonction de vos besoins

.

Answer 2

document.getElementById('ratio').onchange = function(){
    var val = this.value;
    if( val * 1 == NaN || val <= 0 )
    return false; //报错
    
    //正确代码
};

document.getElementById('ratio').onkeyup = function(){}; //也行

Answer 3

CSS：

.red_border {
    border: 1px solid red; // 红框样式
}

.red_text {
    color: red; // 红色提示文字样式
}

HTML：

<td class="form-inline">
    <input type="text" class="form-control" name="post[post_ratio]" id="ratio" required value="" />&nbsp;&nbsp; %
    <span class="red_text"></span>
</td>

Javascript：

document.getElementById('ratio').onchange = function() {
    var val = this.value;
    var tip = this.getElementsByClassName('red_text')[0];

    if(isNaN(+val) || (!isNaN(+val) && +val <= 0)) {
        // 错误
        this.className = 'red_border';
        tip.innerHTML = '出现错误';
    } else {
        this.className = '';
        tip.innerHTML = '';
    }
};

Answer 4

Réponse courte pour les téléphones mobiles, ajoutez l'attribut pattern à l'entrée, utilisez la régularité pour vérifier le contenu, puis utilisez input:invalid dans le CSS pour marquer le contenu irrégulier dans l'entrée en rouge (juste une case rouge avec du texte rouge ou quelque chose du genre) , et le texte rouge à la fin invitera à écrire p immédiatement après la saisie. Utilisez ensuite

.

p {display:none;color:red;}
input:invalid+p {display:block;}

Après avoir mis en place de telles règles, cela devrait être presque pareil (si l'étiquette est remplacée par l'identifiant, je n'aurai plus à coder sur mon téléphone). Cependant, si vous devez être compatible avec IE9, vous devrez peut-être en écrire un autre compatible...

---

Référence :

MDN - Validation du formulaire