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 - 表單驗證