Vue 使用Composition API 创建自定义可提交表单并在提交时验证

最新推荐文章于 2022-12-12 15:27:52 发布

会飞的企鹅a

最新推荐文章于 2022-12-12 15:27:52 发布

阅读量495

点赞数

分类专栏：前端文章标签： vue.js javascript es6

本文链接：https://blog.csdn.net/m0_58526864/article/details/117334653

版权

本文介绍了如何利用Vue的Composition API创建一个可提交的表单，并在提交时进行验证。通过将表单逻辑封装在JS文件中，结合Element UI构建前端表单，然后在组件中使用ES6的模块导入功能调用相关函数，实现了表单验证和提交的功能。这种做法的一大优点是表单逻辑的高度复用性。

摘要由CSDN通过智能技术生成

首先把我们需要用到的表单逻辑写入一个js文件

import {
    ref, reactive, watch } from "@vue/composition-api"
import axios from "axios"

export default function ({
    onError = () => {
   } }) {
   
  const industries = ref([])
  const form = reactive({
   
    name: ref(""),
    telephone: ref(""),
    error: ref(""),
    nameError: ref(false),
    telephoneError: ref(false),
    success: ref(false),
    failed: ref(false),
  })

  // funtions for submitting the form
  function isValidPhone(telephone) {
   
    const re =