How to handle two-way binding and validation of form data in Vue

How to handle two-way binding and verification of form data in Vue requires specific code examples

Introduction:
In front-end development, forms are very common One of the interactive components. In order to achieve two-way binding and validation of form data, Vue provides some powerful functions and methods. This article will introduce in detail how to handle two-way binding and validation of form data in Vue, and provide specific code examples to help readers better master this knowledge.

1. Two-way binding

In Vue, two-way binding of form data can be achieved through the v-model directive. Two-way binding means that changes in the form input content will be reflected in the data of the Vue instance in real time, and at the same time, changes in the data in the Vue instance will also be updated in the form in real time.

The specific code examples are as follows:

<template>
  <div>
    <input v-model="name" type="text" placeholder="请输入姓名">
    <p>姓名：{{name}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  }
}
</script>

In the above code, the value of the input tag is bidirectionally bound to the name attribute in the Vue instance through the v-model directive. When the value in the input box changes, the name attribute in the Vue instance will be updated accordingly and displayed on the page.

2. Form verification

In actual development, form verification is an essential function. Vue provides a wealth of instructions and methods to implement form validation.

1. Basic form validation

In Vue, we can use the v-validate directive to perform basic validation of the form. Specific examples are as follows:

<template>
  <div>
    <input v-model="name" type="text" placeholder="请输入姓名" v-validate="'required'">
    <p v-show="errors.has('name')">{{ errors.first('name') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  mounted() {
    this.$validator.extend('required', {
      validate: value => {
        return value.trim() !== ''
      },
      message: '姓名不能为空'
    })
  }
}
</script>

In the above code, we use the v-validate directive to perform basic verification on the input tag, requiring that the input cannot be empty. When there is no content in the input box, an error message will be displayed in the p tag.

2. Custom validation rules

In addition to basic form validation, we can also customize validation rules. In Vue, custom validation rules are implemented by extending the plug-in vue-validator.

The specific code example is as follows:

<template>
  <div>
    <input v-model="password" type="password" placeholder="请输入密码" v-validate="'password'">
    <p v-show="errors.has('password')">{{ errors.first('password') }}</p>
  </div>
</template>

<script>
import { extend } from 'vue-validator'

export default {
  data() {
    return {
      password: ''
    }
  },
  mounted() {
    extend('password', {
      validate: value => {
        return value.length >= 6 && /d/.test(value) && /[a-zA-Z]/.test(value)
      },
      message: '密码长度至少为6位且包含字母和数字'
    })
  }
}
</script>

In the above code, we define a custom verification rule named password, which requires the password to be at least 6 in length digits and contains letters and numbers. When the content in the input box does not meet this rule, the corresponding error message will be displayed in the p tag.

Summary:

Through the introduction of this article, we can see that processing two-way binding and verification of form data in Vue is very simple and flexible. Vue provides a wealth of instructions and methods that allow us to easily implement two-way binding and validation functions of forms. I hope this article will be helpful to you and help you better understand the two-way binding and validation methods of form data in Vue.

The above is the detailed content of How to handle two-way binding and validation of form data in Vue. For more information, please follow other related articles on the PHP Chinese website!