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

问题描述

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

问题解答

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

document.getElementById(’ratio’).onchange = function(){ var val = this.value; if( val * 1 == NaN || val <= 0 ) return false; //报错//正确代码};document.getElementById(’ratio’).onkeyup = function(){}; //也行回答3：

CSS：

.red_border { border: 1px solid red; // 红框样式}.red_text { color: red; // 红色提示文字样式}

HTML：

<td class='form-inline'> <input type='text' name='post[post_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 = ’’; }};回答4：

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

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

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

参考：

MDN - 表单验证