0

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

有一个简单的表单元素：

<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 名称）？

提前感谢大家的帮助！

4

4 回答 4

3

我猜参数引用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");
    }
}
于 2013-04-06T20:30:51.460 回答
1

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

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

于 2013-04-06T20:30:57.773 回答
0

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

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

$(this) 对您不起作用的原因是它没有被定义，您不在回调或创建引用的函数中。

要执行通用循环并使用 $(this) 您需要执行以下操作：

$('input').each(function() {
  $(this)  // will now reference each element.
});
于 2013-04-06T20:27:54.913 回答
0

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

于 2013-04-06T20:33:24.873 回答