Question

我找不到答案。所以我希望这不是多余的..

有一个简单的表单元素：

<label>Email Address:</label>
<input type="text" onblur="validateEmail(this)" />

我正在运行验证脚本来检查此输入值（onBlur）是否有效。效果很棒！

现在..我正在尝试做的是保持脚本通用 - 所以我不必依赖类名或ID来使它工作。

所以我想知道的是，如果值不是电子邮件地址，如何对此字段采取措施。具体来说，我想改变标签的颜色，并在字段上加上红色边框。

这是不起作用的脚本：

var inputTextTest = field.value;
var filter = /^((\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*?)\s*;?\s*)+/;

if ( filter.test(inputTextTest) ) {
    var name = field;
    $(this).focus();
    $(this).css("border","1px");
    $(this).css("border-color","red");
} else {
    $(this).css("border", "none");
}

我可以看到我对$（this）的调用不起作用。那么我该如何对这个特定领域采取行动并保持脚本完全通用（即不依赖于特定的类或ID名称）？

感谢所有人提前帮助你！

Answer 1

我猜测引用this的参数为field，因为您在顶部使用field.value：

validateEmail(field) {
    var inputTextTest = field.value;
    var filter = /^((\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*?)\s*;?\s*)+/;

    if ( filter.test(inputTextTest) ) {
        var name = field.name;
        $(field).focus().css("border","1px solid red");
    } else {
        $(field).css("border", "none");
    }
}

Answer 2

尝试field而不是this，假设函数声明看起来像validateEmail(field)

在onblur内，您将this作为对象传递给函数，但随后需要使用您在声明函数参数时使用的任何参数名称

Answer 3

为了使其通用，我建议你使用一个现有的验证库：

https://github.com/DiegoLopesLima/Validate#readme

$（this）不适用于你的原因是因为它没有定义，你没有在回调或创建引用的函数中。

要进行泛型循环并使用$（this），您需要执行以下操作：

$('input').each(function() {
  $(this)  // will now reference each element.
});

Answer 4

将脚本放在函数中并将对象作为参数然后执行对象上的所有操作。

$（this）在未命名的html元素上的值是多少？

4 个答案: