jquery/JS只允許在文本框中輸入數字和字母

4

您可以使用一個簡單的正則表達式對錶單提交以評估文本框的內容，顯示錯誤並停止表單提交。從支票中取出一個功能，當文本框失去焦點時，您也可以應用它。經常這樣做，你會發現你已經重新實現了驗證插件。

$(function() { 
    $('form').submit(function() { 
     return validateTB($('#textbox'), true, $('#textboxError')); 
    }); 

    $('#textbox').blur(function() { 
     validateTB($(this), true, $('#textboxError')); 
    }); 

    function validateTB(tb,required,msg) { 
     var $tb = $(tb); 
     var re = '/^[a-z0-9]'; 
     if (required) { 
      re += '+'; 
     } 
     else { 
      re += '*'; 
     } 
     re += '$/'; 

     if ($tb.val().match(re) == null) { 
      $(msg).show(); 
      return false; 
     } 
     $(msg).hide(); 
     return true; 
    } 
});

來源

2010-01-03 17:22:09 tvanfosson

+0

+1 - >不錯片斷 – JohnIdol 2010-01-03 19:49:57

3

如果你不想使用插件 - 那麼一些普通的舊JS驗證呢？

我張貼有關這位在我的博客前一陣子 - >http://dotnetbutchering.blogspot.com/2009/04/definitive-javascript-validation-with.html

你會看到，我提出的解決方案的功能需要輸入域ID和一個正則表達式（你將不得不拿出如果您只需要aplhanumeric，那麼對於您的驗證需求使用regEx應該非常簡單），並根據驗證的結果將控件的背景設置爲綠色或紅色。我知道這並不完美，但我認爲這足以讓你走了，你可以用它作爲自己的起點。

我相信有mote優雅的解決方案使用jQuery或普通的JS，但沿着這些線的東西到目前爲止一直工作得很好。

希望它有幫助。

來源

2010-01-03 16:54:35 JohnIdol

4

我的解決辦法是這樣的：

jQuery('input[type="text"]').keyup(function() { 
    var raw_text = jQuery(this).val(); 
    var return_text = raw_text.replace(/[^a-zA-Z0-9 _]/g,''); 
    jQuery(this).val(return_text); 
});

每一個用戶嘗試輸入不是數字，字母，空格等任何東西，或強調功能的時間返回與去除帶狀字符的字符串。

來源

2012-06-20 00:35:41 Ian

+0

作品完美:)這個我覺得是一個更好的方法，因爲它已經阻止用戶輸入無效字符。 :)如何在用戶按下提交按鈕時阻止任何提交，如果文本框中沒有條目，我該怎麼辦？ – Si8 2014-01-21 02:26:29

+0

我的方法不是最安全的方法，而是使用jQuery隱藏提交按鈕，直到數據正確。不利的一面是用戶可以通過使用調試器來顯示按鈕。所以失敗保險箱是在提交後添加檢查以確保數據是正確的。然後通知用戶他們的錯誤。 – Ian 2014-01-22 14:12:57

1

由於tvanfossen的片段只觸發了對提交和伊恩的不漂亮，因爲它可以，我只是想增加一個更簡潔的方法：

HTML：

<input id="myinput" type="text">

JS（jQuery的）：

$('#myinput').keypress(function (e) { 
    var regex = new RegExp("^[a-zA-Z0-9]+$"); 
    var str = String.fromCharCode(!e.charCode ? e.which : e.charCode); 
    if (regex.test(str)) { 
     return true; 
    } 
    e.preventDefault(); 
    return false; 
});

來源

2014-01-03 02:02:43 FlyingLemon

+0

我在這個方法中發現問題，當我複製並粘貼這些章程輸入字段'＃$％^＆*（）'它不會阻止這些章程 – 2015-01-31 17:32:41

0

這是一個簡單的解決方案，將檢查KEYUP輸入和去除不想要的字符作爲用戶類型：

<input class="usr" type="text id="whatever" name="whatever" /> 

     $(".usr").keyup(function() { 
      var n = $(this).val(); 
      if (n.match("^[a-zA-Z0-9 ]*$") == null) { 
       $(this).val(n.slice(0,-1)); 
      } 
     });

正則表達式可以根據規範進行修改。

來源

2017-08-30 12:40:03

0

在伊恩的回答變種是一個小更輕便，更短：

function onlyAllowAlphanumeric() { 
    this.value = this.value.replace(/[^a-zA-Z0-9 _]/g, ''); 
}); 

$('input[type="text"]').keyup(onlyAllowAlphanumeric);

來源

2017-08-30 12:45:09 Martijn

jquery/JS只允許在文本框中輸入數字和字母

回答

相關問題