Menghalang aksara tidak sah daripada dimasukkan dalam medan: Panduan komprehensif

Question

Onkeydown, saya menjalankan JavaScript berikut:

fungsikan ThisOnKeyDown(el) {
   if (el.title == 'textonly') {
       !(/^[A-Za-zÑñ-s]*$/i).test(el.value) ? ''): null;
   }
   if (el.title == 'numbersonly') {
       !(/^[0-9]*$/i).test(el.value) ? el.value = el.value.replace(/[^0-9]/ig, '') : null;
   }
   if (el.title == 'textandnumbers') {
       !(/^[A-Za-zÑñ0-9-s]*$/i).test(el.value) ? ]/ig, ''): null;
   }
}

Salah satu daripada tiga atribut tajuk ini diberikan kepada setiap medan input pada halaman. Kod ini berfungsi selagi aksara yang tidak sah dialih keluar dengan betul, tetapi tidak sehingga aksara seterusnya dimasukkan. Saya ingin mencari cara untuk menolak input yang tidak sah. terima kasih atas bantuan anda!

Edit: Saya mencipta acara secara global. Inilah yang saya lakukan:

function Globalization() {
      var inputs = document.getElementsByTagName('input');
      untuk (i = 0; i < inputs.length; i++) {
          inputs[i].onfocus = createEventHandler(
              ThisOnFocus, input[i]);
          inputs[i].onblur = createEventHandler(
              ThisOnBlur, input[i]);
          inputs[i].onkeydown = createEventHandler(
              ThisOnKeyDown, input[i]);
          inputs[i].onkeyup = createEventHandler(
              ThisOnKeyUp, input[i]);
      }
  }

globalisasi()runbody.onload

Jadi medan input biasa mempunyai HTML dan tiada panggilan fungsi seperti ini:

 ;

Answer 1

Kod di atas menggambarkan ini - hanya nombor dibenarkan. Anda boleh mengubah suainya dengan menambah pengecualian, contohnya BACKSPACE seperti ini

    
        
        
        sssccc
        
    
        
    

Answer 2

Untuk mengelakkannya daripada ditetapkan di tempat pertama, anda boleh mengembalikan palsu pada pengendali acara keydown, sekali gus menghalang acara daripada disebarkan lebih jauh.

Saya menulis contoh di bawah menggunakan jQuery, tetapi anda boleh menggunakan fungsi yang sama dengan pengikatan tradisional.

Walaupun pengesahan di bahagian pelayan juga penting, pengesahan pihak pelanggan juga penting untuk kemesraan pengguna.

$("input.number-only").bind({
    keydown: function(e) {
        if (e.shiftKey === true ) {
            if (e.which == 9) {
                return true;
            }
            return false;
        }
        if (e.which > 57) {
            return false;
        }
        if (e.which==32) {
            return false;
        }
        return true;
    }
});