Question

我想用javascript验证一些值，虽然过程是这样的：

我在用户提交表单时触发事件
Javascript获取值并验证它们。如果他们是正确的，继续第三，如果没有，则输回。
提出ajax请求

这是我的提交功能：

function getHundreds(n) {
        var ary = [];
    while(n>=100) {
        ary.push(100);
        n-=100;
    }
    if(n>0) ary.push(n);
    return ary;
}

这是抓取值

submitLoginForm: function (event) {
    event.preventDefault();

    // get the values
    var object = this._getFormValues();

    // make ajax request
    this.querySelector('#postLoginForm').body = object;
    this.querySelector('#postLoginForm').generateRequest();
},

这是验证字段或返回

_getFormValues: function () {
    var email = this.querySelector('#email').value;
    var password = this.querySelector('#password').value;
    var remember = this.querySelector('#remember').value;

    this._validate(email, password);

    return { 'email': email, 'password': password, 'remember': remember };
}

直到现在我像这样使用早期回归：

_validate: function (email, password) {                
    if (email === '' || password === '') {
        var elements = this.querySelectorAll('.form-group');

        for (var i = 0; i < elements.length; i++) {
            elements[i].className += ' has-error';
        };

        this.hasError = true;
        this.errorMessage = 'Email and Password are required fields.'

        return;
    }
},

但由于我有嵌套函数，我想知道如果字段不验证，如何完全中止该过程。

像if ('email' === '') { return; } makeAjaxRequest();函数这样的东西会很好。

Answer 1

我认为这里的改进设计是更好的方法。为什么_getFormValues会进行任何验证？如果你将这两个函数分离，你的代码就会更清晰，你可以轻松地“提前返回”。我将1.将从_getFromValues返回的内容保存到变量中2.查询该对象是否为空值（'email ===''）
3。然后，如果在validate中填写了适当的字段，则执行ajax调用。如果没有，请通知用户，不要验证或ajax。

Answer 2

更好的方法是将一些嵌套分离出去。更喜欢返回一个bool来使这样的控制流变得容易。所以，只需移动一些代码，我就会这样做：

您的提交功能：

submitLoginForm: function (event) {
  event.preventDefault();

  // get the values
  var object = this._getFormValues();

  if(this._validates(object)) {
    // make ajax request
    this.querySelector('#postLoginForm').body = object;
    this.querySelector('#postLoginForm').generateRequest();      
  } else {
    // moved this from validation 
    var elements = this.querySelectorAll('.form-group');
    for (var i = 0; i < elements.length; i++) {
      elements[i].className += ' has-error';
    };
  }
},

获取表单值

_getFormValues: function () {
  var email = this.querySelector('#email').value;
  var password = this.querySelector('#password').value;
  var remember = this.querySelector('#remember').value;

  return { 
      'email': email,
      'password': password, 
      'remember': remember 
  };
}

您的验证员：

_validate: function (values) {                
  var email = values.email
  var passw = values.password

  if (email === '' || password === '') {
    return false
  } else {
    return true
  }
},

我想我得到了所有东西 - 但无论如何这都是一个起点。将每个功能与其他任务分离，使一切变得更加容易。

Answer 3

我会看看一些Promises实现。

jQuery $.Deferred()对象或Q实现。如果嵌套函数必须异步运行，它也会很有用。

//quick example
submitLoginForm: function (event) {

    var data = _getFormValues();

    _submit(data).then(
        function () {
            //SUCCESS
            //update UI accordantly
        },
        function (error) {
            //FAIL
            console.log(error);
        }
    );
}

_submit: function (data) {
    var $q = new $.Deferred();

    //AT ANY POINT, run $q.resolve() if you've got a success;
    //OTHERWISE, run $q.reject() to trigger a failure.

    if (_validate() == false) {
        $q.reject("validation failed");       
    }

    makeAjax("/api/foo", function () {
        //ajax success
        $q.resolve(jsonFromServer); 
    })

    return deferredObj.promise();
}

您的函数_submit()将返回一个promise对象，然后运行成功或失败函数，具体取决于您是否运行resolve或reject调用。这非常适合与多个嵌套函数同步或异步。

Javascript：使用嵌套函数中的条件语句停止执行代码

3 个答案: