Vue3 表单学习笔记

简介

表单在Web应用程序中是必不可少的。Vue3中提供了一些方便的工具来处理表单数据和验证。本篇学习笔记将介绍Vue3表单的基础知识以及一些实用的操作。

数据绑定

Vue3中通过v-model指令来实现双向数据绑定，从而让表单数据与Vue实例的数据绑定在一起。下面是一个简单的例子：

htmlCopy Code
<template>
  <div>
    <input type="text" v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

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

在这个例子中，用户输入的数据会实时更新到message变量中，并且在页面上也会实时反映出来。

表单控件

Vue3中支持各种类型的表单控件，包括文本框、下拉框、单选框和复选框等。下面是一个例子：

htmlCopy Code
<template>
  <form>
    <label>
      用户名：
      <input type="text" v-model="username">
    </label>
    <br>
    <label>
      密码：
      <input type="password" v-model="password">
    </label>
    <br>
    <label>
      性别：
      <select v-model="gender">
        <option value="male">男</option>
        <option value="female">女</option>
      </select>
    </label>
    <br>
    <label>
      爱好：
      <input type="checkbox" value="reading" v-model="hobbies"> 读书
      <input type="checkbox" value="music" v-model="hobbies"> 听音乐
    </label>
    <br>
    <label>
      是否同意用户协议：
      <input type="checkbox" v-model="isAgree">
    </label>
  </form>
</template>

<script>
  export default {
    data() {
      return {
        username: '',
        password: '',
        gender: '',
        hobbies: [],
        isAgree: false
      }
    }
  }
</script>

在这个例子中，我们使用了input、select和checkbox等表单控件，通过v-model指令和Vue实例进行了数据绑定。

表单验证

Vue3提供了内置的表单验证功能，可以方便地定义表单字段的验证规则。下面是一个例子：

htmlCopy Code
<template>
  <form @submit.prevent="handleSubmit">
    <label>
      用户名：
      <input type="text" v-model="username" required>
      <p v-if="!username">用户名不能为空！</p>
    </label>
    <br>
    <label>
      密码：
      <input type="password" v-model="password" minlength="6" maxlength="12" required>
      <p v-if="!password">密码不能为空！</p>
      <p v-else-if="password.length < 6">密码长度不能少于6位！</p>
      <p v-else-if="password.length > 12">密码长度不能超过12位！</p>
    </label>
    <br>
    <button type="submit">提交</button>
  </form>
</template>

<script>
  export default {
    data() {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      handleSubmit() {
        if (!this.username || !this.password || this.password.length < 6 || this.password.length > 12) {
          alert('表单验证不通过！');
          return;
        }
        // 提交表单数据
      }
    }
  }
</script>

在这个例子中，我们使用了required、minlength和maxlength等表单属性来定义了表单字段的验证规则，并且通过v-if指令来动态显示错误信息。在提交表单时，可以通过判断表单字段是否满足要求来进行表单验证。

实例

下面是一个完整的实例，它展示了如何使用Vue3来构建一个注册页面的表单：

htmlCopy Code
<template>
  <form @submit.prevent="handleSubmit">
    <label>
      用户名：
      <input type="text" v-model="username" required>
      <p v-if="!username">用户名不能为空！</p>
    </label>
    <br>
    <label>
      密码：
      <input type="password" v-model="password" minlength="6" maxlength="12" required>
      <p v-if="!password">密码不能为空！</p>
      <p v-else-if="password.length < 6">密码长度不能少于6位！</p>
      <p v-else-if="password.length > 12">密码长度不能超过12位！</p>
    </label>
    <br>
    <label>
      确认密码：
      <input type="password" v-model="confirmPassword" minlength="6" maxlength="12" required>
      <p v-if="!confirmPassword">确认密码不能为空！</p>
      <p v-else-if="confirmPassword !== password">两次输入的密码不一致！</p>
    </label>
    <br>
    <label>
      邮箱：
      <input type="email" v-model="email" required>
      <p v-if="!email">邮箱不能为空！</p>
      <p v-else-if="!emailRegExp.test(email)">邮箱格式不正确！</p>
    </label>
    <br>
    <label>
      手机号码：
      <input type="tel" v-model="phone" required>
      <p v-if="!phone">手机号码不能为空！</p>
      <p v-else-if="!phoneRegExp.test(phone)">手机号码格式不正确！</p>
    </label>
    <br>
    <button type="submit">注册</button>
  </form>
</template>

<script>
  export default {
    data() {
      return {
        username: '',
        password: '',
        confirmPassword: '',
        email: '',
        phone: '',
        emailRegExp: /^\w+@[a-z0-9]+\.[a-z]+$/,
        phoneRegExp: /^1[3456789]\d{9}$/
      }
    },
    methods: {
      handleSubmit() {
        if (!this.username || !this.password || !this.confirmPassword || this.password.length < 6 || this.password.length > 12 || this.confirmPassword !== this.password || !this.email || !this.emailRegExp.test(this.email) || !this.phone || !this.phoneRegExp.test(this.phone)) {
          alert('表单验证不通过！');
          return;
        }
        // 提交表单数据
      }
    }
  }
</script>

在这个实例中，我们定义了多个表单字段，并且使用了各种类型的表单控件和表单属性来实现数据绑定和表单验证。同时，我们也定义了一些正则表达式来对邮箱和手机号码进行格式校验。在提交表单时，如果表单验证不通过，会弹出提示框，否则就会提交表单数据。