Home > Article > Web Front-end > How to handle form input verification and submission in Vue

How to handle form input verification and submission in Vue

WBOYOriginal: 2023-10-15 08:48:181927browse

Form input verification and submission in Vue
In front-end development, form input verification and submission is a very important link. As a popular front-end framework, Vue provides some convenient ways to handle the verification and submission of form inputs. This article will introduce how to verify and submit form input in Vue, and give some code examples.

Verify form input
In Vue, we can use the built-in validator to validate form input. Vue provides a method called "validation instructions", which can be used directly in templates.

First, introduce the library files of Vue and Element UI in the

tag of HTML (Element UI is a set of desktop component libraries based on Vue.js):

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

Then , define a simple form within the

tag of HTML:

<body>
  <div id="app">
    <el-form ref="form" :rules="rules" label-width="100px" style="max-width: 450px; margin: 50px auto;">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
    </el-form>
  </div>
  
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          form: {
            username: '',
            password: '',
          },
          rules: {
            username: [
              { required: true, message: '用户名不能为空', trigger: 'blur' },
              { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' },
            ],
            password: [
              { required: true, message: '密码不能为空', trigger: 'blur' },
              { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
            ],
          },
        };
      },
      methods: {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('表单校验通过，可以提交');
            } else {
              console.log('表单校验失败');
              return false;
            }
          });
        },
      },
    });
  </script>
</body>

In the above code, we bind the input value of the form through the v-model directive, and bind the form's input value through the :rules attribute Verification rules. Among them, required: true indicates required items, and min and max represent the minimum and maximum length.

In the submitForm method, we call the $refs[formName].validate method for form verification. When the verification is successful, a prompt box will pop up.

Submit form
In Vue, submitting a form can be achieved by sending an Ajax request or calling the backend API. Here is a sample code for sending an Ajax request:

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        form: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            { required: true, message: '用户名不能为空', trigger: 'blur' },
            { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
          ],
        },
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 表单校验通过，发送Ajax请求
            this.$http.post('/api/submit', this.form).then((response) => {
              console.log('提交成功');
            }).catch((error) => {
              console.log('提交失败');
            });
          } else {
            console.log('表单校验失败');
            return false;
          }
        });
      },
    },
  });
</script>

In the above code, we use the $http object provided by Vue to send the Ajax request and submit the form data to the backend/api/submit Interface.

Summary
Through the above examples, we can see that it is very simple to handle the verification and submission of form inputs in Vue. We only need to set the verification rules, call the verification method, and then perform corresponding processing based on the verification results. At the same time, we can also submit form data by sending Ajax requests or calling back-end APIs.

Of course, the above code is just a simple example, you can extend and modify it according to your actual needs. I hope this article can help you handle the verification and submission of form inputs in Vue!

The above is the detailed content of How to handle form input verification and submission in Vue. For more information, please follow other related articles on the PHP Chinese website!

ajax html 前端框架接口 JS 对象 http ui

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to achieve multi-language and internationalization in VueNext article：How to achieve multi-language and internationalization in Vue

See more

How to handle form input verification and submission in Vue

Related articles