javascript - Bagaimanakah js menentukan bahawa nilai input ialah nombor, tidak kurang daripada atau sama dengan 0, tanpa menggunakan amaran, tetapi menggunakan fon merah pada baris yang sama untuk menggesa pengguna

Question

Bagaimanakah js menentukan bahawa nilai input ialah nombor, tidak kurang daripada atau sama dengan 0, dan boleh menjadi perpuluhan. Jika tidak layak, 在%后面以红色字提示用户, TKS!

Answer 1

Tentukan sama ada fokus berada dalam input (atau lulus acara cuti fokus)
Kemudian hantar nilai ke kelas kaedah js untuk penghakiman mengikut keperluan anda

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

Jawapan ringkas untuk telefon bimbit, tambahkan atribut corak pada input, gunakan keteraturan untuk mengesahkan kandungan, dan kemudian gunakan input:invalid dalam css untuk menandakan kandungan yang tidak teratur dalam input dengan warna merah (hanya kotak merah dengan teks merah atau sesuatu) , dan teks merah pada penghujungnya akan menggesa p ditulis sejurus selepas input, kemudian gunakan

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

Selepas menetapkan peraturan sedemikian, ia sepatutnya hampir sama (jika label diganti dengan ID, saya tidak perlu mengekod lagi pada telefon saya). Walau bagaimanapun, jika anda perlu serasi dengan IE9, anda mungkin perlu menulis satu lagi yang serasi...

---

Rujukan:

MDN - Pengesahan Borang