jquery / JS只允许文本字段中的数字和字母

Question

What would be the easiest way to allow only letters/numbers in a textbox. We are using JS/jQuery, but don't want to use a validation plugin?

Answer 1

My solution was this:

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);
});

Every time a user tries to enter anything other than a number, letter, space or underscore the function returns a string with the removed banded characters.

Answer 2

You can use a simple regex on form submit to evaluate the contents of the text box, show an error, and stop the form submit. Make a function out of the check and you can also apply it when the text box loses focus. Do this very often and you'll find that you've reimplemented the validation plugin.

$(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;
    }
});

Answer 3

If you don't wanna use plugins - What about some plain old JS validation?

I posted about this on my blog a while ago --> http://dotnetbutchering.blogspot.com/2009/04/definitive-javascript-validation-with.html

You'll see that the function in my proposed solution takes a input field ID and a regex (and you'll have to come up with a regEx for your validation needs, should be pretty trivial if you want only aplhanumeric) and sets the background of the control to green or red depending on the outcome of the validation. I know it's not perfect but I think it's enough to get you going, and you can use it as a starting point to roll your own.

I am sure there are mote elegant solutions using jQuery or plain JS but something along these lines has been working pretty well for me so far.

Hope it helps.

Answer 4

Since tvanfossen's snippet triggers only on submit and Ian's is not as pretty as it could be, I just want to add a more cleaner approach:

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;
});

Answer 5

This is a simple solution that will check the input on keyup and remove unwanted characters as the user types:

<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));
            }
        });

The regex can be altered to suit specifications.

Answer 6

A variant on Ian's answer is a little more lightweight and shorter:

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

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