Question

我有一个名为generate_form的函数，该函数使用jQuery创建表单并将其插入页面。其他几个函数调用此通用函数来创建其表单，然后依次返回该表单。

为了进行验证，我希望调用者能够提供自己的验证功能，因为特定的用例具有非标准的约束（例如必须发出ajax调用来检查/验证事物）。我遇到的问题是，我不确定如何将自定义验证功能添加到表单的Submit事件中。

非常简化和截断的代码：

function user_test() {
  $('#formcontainer').append(generate_form(
    {
      name:'test',
      id:'user_test_form',
      fields:
        [
          {name:'username',type:'text',id:'username'}
        ],
      validation:function() { return $('#username').length > 0; }
    })
  );
}

function generate_form(data) {
  var form=$('<form>',{id:data['id']});
  //SNIP: add fields to form

  $(form).submit(function(event) {
    event.preventDefault();

    //does not work, because data is undefined in this scope
    if ( !data['validation']() ) {
      //SNIP: validation failed notice
      return false;
    }

    //SNIP: post form

  });
  return form;
}

Answer 1

有几种解决方法。一种是将提交回调绑定到data的上下文，因此：

$(form).on('submit', function(event) {
    event.preventDefault();
    if (this.validation && !this.validation()) return false;
}.bind(data));

另一种方法是传递data作为事件数据。这是通过.on()的第三个参数完成的：

$(form).on('submit', null, data, function(event) {//...

然后可以通过data在回调中访问原始的event.data。

还请记住，您假设在调用验证回调之前已通过验证回调，如果没有验证回调，则会出错。

在运行时调用自定义方法进行表单验证

1 个答案: