Question

这是我创建的验证功能：

checkValidation: function (e) {
    e.stopPropagation();
    var data = $(e.target).val();
    var color = (data === '') ? '#F00' : '#000';

    $(e.target).css({ 'border': '1px solid ' + color });
}

每当触发focusout事件时都会调用此验证函数：

events: {
    'click #commentSubmit':'commentSubmitFun',
    'focusout #commUserName':'checkValidation',
    'focusout #commUserMsg':'checkValidation'
}

现在我想在checkValidation内调用相同的commentSubmitFun函数，如下所示：

if (userName !== '' && userComment !== '' {...}  else { this.checkValidation(); }

但是，如何将e.target传递到checkValidation函数？

Answer 1

点击后调用commentSubmitFun时，它也会传递event。如果您打算在checkValidation内致电commentSubmitFun，则可以将event对象作为参数传递到checkValidation来电。

说实话，我建议重构你的checkValidation函数，以字符串data作为参数。这样，无论何时拨打checkValidation，您都必须传入您明确检查过的数据。

Answer 2

我同意@wmock的回答。但我认为用代码添加新答案会更好。

由于您已经有checkValidation函数需要Event对象e作为参数，因此您只需将e传递给它即可使其正常工作。因此，当您需要在checkValidation中调用commentSubmitFun()时，只需checkValidation(e)，它就可以正常工作。

commentSubmitFun: function(e) {
    // e is the click event occured on #commentSubmit element
    if (youNeedCheck) {
        checkValidatoin(e)
    }
}

但我不认为将checkValidation用作事件监听器是一个好主意，这会导致您必须传递Event对象的限制只调用函数的参数。实际上，事件监听器被设计为仅在事件发生时被触发，它被绑定到事件并且不应该在其他地方被调用。

您最好将element作为此参数

checkValidation: function (el) {
    var data = $(el).val();
    var color = (data === '') ? '#F00' : '#000';

    $(el).css({ 'border': '1px solid ' + color });
}

然后，只要您需要验证某些内容，就可以调用此checkValidation函数。请记住在事件对象中重构代码。

events: {
    // ...
    'focusout #commUserName':'checkUserName'
}

checkUserName: function(e) {
    checkValidation(e.target);
}

Answer 3

首先，这里有三个不同的问题

检查某些数据的有效性
处理验证错误
调用验证逻辑

在最简单的情况下，你可以使用四个函数，

function checkElementValidity($el) { 
    // some logic. return true or 
    // object describing an error. 
    // if valid, return false. 
}

function displayValidationError($el, err) {
    // logic to display it.
}

function handleChange(evt) {
   // stop progagation.
   var $el = $(evt.target);
   var result = checkElementValidity($el);
   // depending on result
   displayValidationError($el);  
}

function validateAllElements(){
   var elems = [this.$el.find("#id-1"), this.$el.find("#id-2") ...];
   var isValid = true;
   elems.map(function ($el) {return {$el: $el, res: checkElementValidity($el);})
        .filter(function (data) {return data.res;})
        .forEach(function (data) { isValid = false;
             displayValidationError(data.$el, data.res)});
   return isValid;
}

其他地方，

events: {
    'click #commentSubmit':'commentSubmitFun',
    'focusout #commUserName':'handleChange',
    'focusout #commUserMsg':'handleChange'
}

function commentSubmitForm(evt){
   // your logic
   var isValid = validateAllElements();
}

我没有使用Backbone，因此代码可能无法正常工作。然而，它确实说明了您可能采取的方法。具体实现由您决定，如果您愿意，可以将所有4个功能合并为一个。重要的是要意识到存在各自不同的问题。

当我在骨干中调用同一个函数时，如何传递e.target值

3 个答案: