js怎么判断input输入的值是数字，不小于等于0，不使用alert,而在同一行上用红色字体提示用户

Question

js怎么判断input输入的值是数字，不小于等于0，可以为小数。如果不符合条件，在%后面以红色字提示用户，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 - 表单验证