0

我看到了这个验证插件http://demos.usejquery.com/ketchup-plugin/我想知道，你如何确定输入的位置？如您所见，使用该插件会显示一条消息，但它如何确切知道有错误的输入在哪里并将消息准确地放在那里？

4

2 回答 2

2

该插件的源代码，特别是错误消息容器的源代码如下所示：

createErrorContainer: function(form, el) {      
  if(typeof form == 'function') {
    this.defaults.createErrorContainer = form;
    return this;
  } else {
    var elOffset = el.offset();

    return $('<div/>', {
             html   : '<ul></ul><span></span>',
             'class': 'ketchup-error',
             css    : {
                        top : elOffset.top,
                        left: elOffset.left + el.outerWidth() - 20
                      }
           }).appendTo('body');
  }
},

如您所见，它使用 .offset() 方法来获取输入字段相对于文档的位置。

更多信息在这里：http ://api.jquery.com/offset/

于 2013-03-06T22:41:14.503 回答
1

在原始 JavaScript 中获取元素（可能通过 id）后：

element.offsetLeft
element.offsetTop

或者使用 jQuery 的跨浏览器.offset()函数。

为了验证 Html5 已经这样做了。您真的不需要使用 Javascript 进行验证。当浏览器不支持它时，还有可用的pollyfills填充对 html5 表单验证的支持。

于 2013-03-06T22:39:48.340 回答