Question

所以现在我有一个输入验证方法，结构如下：

function validate(element, regex);

'element'是输入DOM元素，'regex'是该方法检查用户输入的正则表达式。如果输入与正则表达式不匹配，则输入元素轮廓将变为红色。如果用户输入有效，则轮廓会变回黑色。

有没有办法将此函数与CSS类关联，以便具有该类的每个元素都会自动调用该函数？

<input type="text" id="text_field" class="yearvalidate"/>

因此类“yearvalidate”会将一个正则表达式发送到validate（），将输入限制为4位数。这将自动完成，而不是显式编写Javascript来调用文本字段的验证。

有没有办法做到这一点，还是我必须在Javascript中进行显式调用？

Answer 1

使用jQuery：

$('input').each(function(i,e) {
  var regex = getRegex($(e).attr('class'));
  if (regex) validate(e, regex);
});

您必须创建另一个函数getRegex()，以便将'yearvalidate'转换为/\d{4}/。

function getRegex(classname) {
   switch(classname) {
      case 'numbervalidate':
        return /\d+/;
        break;
      case 'yearvalidate':
        return /\d{4}/;
        break;
   }
}

Answer 2

你可以做类似的事情 -

$('.yearvalidate').change(function() {
  //check value using your regex
});

这将挂钩每次具有“yearvalidate”类的元素失去焦点时触发的函数。

Answer 3

您需要某种框架来为您进行布线。我的建议是使用jQuery将类“yearvalidate”的任何元素的更改绑定到验证函数。

$(function() {
    $('.yearvalidate').change(validate);
});

你能自动将Javascript与基于CSS类的DOM元素相关联吗？

3 个答案: