jQuery 工具提示自定义实现

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 type='text' name='firstName' 
    data-expression='[a-zA-Z]' data-error='Please Enter First Name' />

： jquery.com/jQuery.data/" rel="nofollow">.data API 在您需要时处理该信息。

但就其价值而言，这似乎不是处理验证的好方法，因为使用 Firebug 或 Chrome 的 Web 开发者控制台的人可以轻松更改 data-expression 属性，从而进行操作以获取围绕你的验证。