如何将 function 传递到 JavaScript 中的另一个 function

Question

I have a function that check Username in a form,parent function i check if there are empty field, and now i wanna pass usernameValidat() in inside onSubmit() to check if it match with my username validation. Can anyone give me the answer to solve this issue please

onSubmit() {
            var text = "Please insert ";
            for (let i = 0; i < Constant.REGISTER_INFOS.length; i++) {
                if (Constant.REGISTER_INFOS[i].info == "") {
                    text = text + Constant.REGISTER_INFOS[i].title.toLowerCase() + ", ";
                }
            }
            alert(text);
            
        },
        usernameValidate() {
            if (Constant.REGISTER_INFOS[0].info.length < 4) {
                alert("Username is too short");
                return false;
            }
        },

Answer 1

Assuming that this is part of a Vue app, so something like:

const App = new Vue({
  methods: {
    onSubmit() {
      var text = "Please insert ";
      for (let i = 0; i < Constant.REGISTER_INFOS.length; i++) {
        if (Constant.REGISTER_INFOS[i].info == "") {
          text = text + Constant.REGISTER_INFOS[i].title.toLowerCase() + ", ";
        }
      }
      alert(text);
    },
    usernameValidate() {
      if (Constant.REGISTER_INFOS[0].info.length < 4) {
        alert("Username is too short");
        return false;
      }
    },
  }
});

Then you want to call another method using the this keyword, to access other methods on this Vue instance.

So onSubmit() might look like:

    onSubmit() {
      var text = "Please insert ";
      for (let i = 0; i < Constant.REGISTER_INFOS.length; i++) {
        if (Constant.REGISTER_INFOS[i].info == "") {
          text = text + Constant.REGISTER_INFOS[i].title.toLowerCase() + ", ";
        }
      }
      this.usernameValidate();
      alert(text);
    },

There are some big issues with this code though, and that won't actually do anything of note, as nothing is being done with the return value.

A better way to handle this would be to:

1. Return true or false from usernameValidate , depending on whether or not it's successful, and check it in if statement.
2. Change the signature of the usernameValidate method to take an argument . This means that we can re-use this functionality with any input, making it a lot more flexible.

With these two changes, we end up with the following:

const App = new Vue({
  methods: {
    onSubmit() {
      var text = "Please insert ";
      for (let i = 0; i < Constant.REGISTER_INFOS.length; i++) {
        if (Constant.REGISTER_INFOS[i].info == "") {
          text = text + Constant.REGISTER_INFOS[i].title.toLowerCase() + ", ";
        }
      }
      if (this.usernameValidate(Constant.REGISTER_INFOS[0].info) {
        alert(text);
        return true;
      }
      alert("Registration Failed!");
      return false;
    },
    usernameValidate(username) {
      if (username.length < 4) {
        alert("Username is too short");
        return false;
      }
      return true;
    },
  }
});

Hopefully that clears a few things up, and can give you a little more insight in to programming in general.

Having said all of that, I would highly recommend learning JavaScript from scratch, before getting stuck in to frameworks (which VueJS is) and things like that. Understanding the core principles of programming, conditional logic, etc., will make you much more competent in the long run, and just grabbing at code snippets from StackOverflow will just lead to you pulling your hair out, and being stuck on a problem for days at a time.