jQuery Tooltip 自定义实现

Question

我正在使用一个生成 HTML 表单的应用程序，其中包含用于客户端验证的自定义属性。用于验证的错误消息包含在 error 属性中，用于验证输入的表达式包含在 expression 属性中。

我有以下 javascript 块，

$(document).ready(function() {

 $("input[expression]").blur(function() {
    var inputs = $(":input[expression]");
    inputs.each(function(index){ 
       var input = inputs[index]; 
       var expression = $(this).attr('expression');
       if(!$(this).val().match(expression))
       {
        var error = $(this).attr("error");
        $(this).attr("title",error);
        $(this).tooltip({ position: "center right", opacity: 0.7});
        $(this).tooltip().show();
       }
       else
       {
       }
   });
  }); 
}); 

我试图做的是设置所有具有 表达式 属性的字段，以在输入框失去焦点时根据当前值验证它们的表达式值。

这在某种程度上是可行的，但不是我希望它具有的行为。

现在，当我单击输入元素时，会弹出工具提示错误消息。我不想要这个，我只希望它在运行 blur() 回调函数后显示错误消息。

有没有正确的方法来做到这一点？

下面显示了我的标记的示例

<input type='text' name='firstName' expression='[a-zA-Z]' error='Please Enter First Name'/>

Answer 1

当您模糊 任何 输入时，您的事件会针对 每个 输入触发。你的正则表达式也错了。

jQuery(document).ready(function() {

            jQuery("input[expression]").blur(function() {
                if(jQuery(this).val().search(jQuery(this).attr('expression')) == -1)
                {
                    var error = jQuery(this).attr("error");
                    jQuery(this).attr("title",error);
                    jQuery(this).tooltip({ position: "center right", opacity: 0.7});
                    jQuery(this).tooltip().show();
                }
            }); 
        }); 

并且正则表达式应该是这样的：^[a-zA-Z]*$

Answer 2

您可以使用 HTML5 的 data 属性，以便将数据存储在您的 <input> 中，例如：

<input type='text' name='firstName' 
    data-expression='[a-zA-Z]' data-error='Please Enter First Name' />

然后，您可以在需要时使用 jQuery 的 .data API 来处理该信息。

尽管如此，这似乎不是处理验证的好方法，因为 data-expression 属性很容易被 Firebug 或 Chrome 的 Web 开发者控制台更改，从而绕过验证。