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

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

世界只因有你 2017-06-28 09:27:53

[JavaScript讨论组]

1649

js怎么判断input输入的值是数字，不小于等于0，可以为小数。如果不符合条件，在%后面以红色字提示用户，TKS！

世界只因有你

全部回复(4)

三叔2017-06-28 09:29:53 4楼

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

赞 +0

添加回复

天蓬老师2017-06-28 09:29:53 3楼

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

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

赞 +1

添加回复

ringa_lee2017-06-28 09:29:53 2楼

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 = '';
    }
};

赞 +0

添加回复

世界只因有你2017-06-28 09:29:53 1楼

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

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

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

参考：

MDN - 表单验证

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>