Question

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

我有以下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在需要时处理该信息。

对于它的价值，这似乎不是处理验证的好方法，因为具有Firebug或Chrome的Web开发人员控制台的人可以很容易地更改data-expression属性，从而操纵来绕过你的验证

jQuery Tooltip自定义实现

2 个答案: