jQuery函数控制文本字段中的用户类型

时间:2014-05-27 01:03:34

标签: javascript jquery regex

我最初的想法是这样的:

$(document).on("element","event", function(e){
});

但我对这个功能有些怀疑:

  1. 我应该为“元素”使用哪个值?我可以使用这样的东西:'input[type=text]'或者我应该为元素使用类(例如class="validate")并使用".validate"例如)

  2. 我应该为"event"使用哪个值?我可以在元素输入中使用onfocus,或者jQuery是否对此类事件有特定的命名法?

  3. 对于每次按键(似乎我应该使用var key = which来捕获),我如何检查它是数字还是字母?

  4. 使用正则表达式字符串,我如何获得特定位置的字符类型?例如,使用正则表达式:[0-9]{2}/[A-Z]{2}/[0-9]{4},位置2应该返回'number'作为类型,位置3应该返回字母,位置2应该返回'symbol'。

  5. 任何人都可以在这里给我一些帮助吗?

    更新

    让我试着更清楚一下我的问题:

    我最初考虑在我的项目中创建这个jquery函数:

    $(document).on("element","event", function(e){
        //
    });
    

    但是我不知道我应该如何监听“事件”(我可以使用与html输入属性相同的事件?)并且想知道元素使用的名称(我曾经使用过的ID或类)元素和jquery示例总是使用它们,但我如何使用自己的元素名称,如输入 - 我看到一旦使用它:input [name = something],我也可以使用它:input [type = text] ?)。

    关于函数的内容,我想象这个伪代码:

    1- tam = size of string (calculated based on regex - already have a function to d this).
    2- model[] = array of characteres with 'tam' elements (ok to me, too).
    3- initialize counter=0.
    4- for each key pressed by user:
    4.1- type = store the type of the character in the position 'counter' of 'model[]' - I think I can use the regex to do this, but I don't know how.
    4.2- if the character has same type from 'type' variable, store it in model[counter] and increment counter.
    

    所以,基本上,我的问题是找到一种方法,给定一个正则表达式,找到每个位置应该是什么类型的字符(我在上面的第4项中用例子解释)。

1 个答案:

答案 0 :(得分:1)

您可以通过多种方式限制/验证用户在输入字段中输入的内容。

方法1

您可以使用输入屏蔽,这是改善表单中数据验证的好方法。屏蔽允许您仅接受特定格式的数据,类型。看看这个 - https://github.com/RobinHerbots/jquery.inputmask

屏蔽演示 - http://robinherbots.github.io/jquery.inputmask/

这也可以根据需要接受正则表达式,可以使用类似的库实现 -

<input id="example2" data-inputmask-regex="[a-za-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?" />

REGEX工作演示 - http://codepen.io/nitishdhar/pen/Clzem

注意 - 此方法实际上限制用户输入或输入任何不符合掩码中给定模式的内容。

方法2

您可以使用不同的输入类型来控制输入,例如。文字,电子邮件,密码,电话号码等。

参考 - https://developer.mozilla.org/en/docs/Web/HTML/Element/Input

注意 - 此方法仅定义要呈现的输入控件的类型,无论是密码类型还是数字类型。帮助浏览器接受这些格式的数据。