javascript - Wie stellt JS fest, dass der Eingabewert eine Zahl ist, die nicht kleiner oder gleich 0 ist, ohne eine Warnung zu verwenden, aber rote Schriftart in derselben Zeile zu verwenden, um den Benutzer aufzufordern?

Question

Wie stellt js fest, dass der Eingabewert eine Zahl ist, nicht kleiner oder gleich 0, und eine Dezimalzahl sein kann? Wenn nicht teilnahmeberechtigt, 在%后面以红色字提示用户, TKS!

Answer 1

判断焦点是否在该input内（或者通过焦点离开事件）
然后进行传值到js方法类进行判断 根据你的要求进行判断

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

手机简答，input里加pattern属性，使用正则验证内容，然后css里使用input:invalid把input里边不合规则的内容标红（就红框红字啊啥的），后边的红字提示p紧跟着input写，然后用

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

这样的规则搞出来，应该就差不多了（标签换下id，我手机就不多码字了）。不过如果需要兼容到IE9的话，可能需要再写个兼容……

---

参考：

MDN - 表单验证