1. Python技术站首页
  2. 其他
  3. Vue

vue elementUI 表单校验功能之数组多层嵌套

• Vue

我将为您提供关于“vue elementUI 表单校验功能之数组多层嵌套”的完整攻略。

1. 前置知识

在学习“vue elementUI 表单校验功能之数组多层嵌套”前，需要掌握以下知识点：

  • Vue.js基础使用方法
  • Vue组件和Props使用方法
  • ElementUI表单组件使用方法

2. 数组多层嵌套表单校验方法

默认情况下，ElementUI只针对表单对象进行校验，但是在实际开发中，我们经常会遇到需要校验数组中某个元素的情况。例如在表单中需要填写多个电话号码，每个电话号码又包含了区号、号码和分机号等信息。

假设我们的数据结构如下所示：

form: {
  name: '',
  phones: [
    {
      areaCode: '',
      number: '',
      ext: ''
    }
  ]
},

(1). 自定义校验规则

首先我们需要定义一个自定义的校验规则，并将其封装成为一个函数。该函数接收两个参数：value和callback。其中，value表示需要校验的值，callback表示校验完成后需要执行的函数。

下面是一个自定义校验规则的示例代码：

// 自定义电话号码校验规则
const validatePhone = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('手机号码不能为空'));
  }
  const reg = /^1[3|4|5|6|7|8|9]\d{9}$/;
  if (!reg.test(value)) {
    callback(new Error('您输入的手机号码不合法'));
  } else {
    callback();
  }
};

(2). 组件中使用校验规则

在组件中，我们需要使用到ElementUI提供的校验规则validator。我们可以在每个需要校验的表单项中定义validator属性，并将上面定义的自定义规则传递进去。

下面是示例代码：

<el-form-item label="电话号码" prop="phones">
  <el-row v-for="(phone, index) in form.phones" :key="index">
    <el-col span="6">
      <el-form-item :prop="`phones.${index}.areaCode`" label="区号">
        <el-input v-model="phone.areaCode"></el-input>
      </el-form-item>
    </el-col>
    <el-col span="9">
      <el-form-item :prop="`phones.${index}.number`" label="号码">
        <el-input v-model="phone.number" v-validate:phone-number="{ validator: validatePhone, trigger: 'blur' }"></el-input>
        <span v-show="errors.has(`phones.${index}.number`)" class="error">{{ errors.first(`phones.${index}.number`) }}</span>
      </el-form-item>
    </el-col>
    <el-col span="9">
      <el-form-item :prop="`phones.${index}.ext`" label="分机号">
        <el-input v-model="phone.ext"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
</el-form-item>

在上面的代码中，我们将在每个号码输入框中定义v-validate指令，并传递自定义校验规则validatePhone。同时，我们也定义了一个prop属性，该属性的值为phones.${index}.number，表示phones数组中第index个元素的number属性需要进行校验。注意，该属性必须以字符串的形式进行传递。

3. 示例说明

(1). 校验规则示例

假设我们需要在表单中，验证输入的电话号码是否符合要求。例如，我们需要输入3个电话号码，每个电话号码由一个区号、一个号码和一个分机号组成，其中号码为必填项。对于号码的校验，我们使用上面所提供的自定义校验规则validatePhone。下面是示例代码：

<template>
  <el-form :model="form" ref="form" :rules="rules" label-width="80px" style="width: 800px;">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="电话号码" prop="phones">
      <el-row v-for="(phone, index) in form.phones" :key="index">
        <el-col span="6">
          <el-form-item :prop="`phones.${index}.areaCode`" label="区号">
            <el-input v-model="phone.areaCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col span="9">
          <el-form-item :prop="`phones.${index}.number`" label="号码">
            <el-input v-model="phone.number" v-validate:phone-number="{ validator: validatePhone, trigger: 'blur' }"></el-input>
            <span v-show="errors.has(`phones.${index}.number`)" class="error">{{ errors.first(`phones.${index}.number`) }}</span>
          </el-form-item>
        </el-col>
        <el-col span="9">
          <el-form-item :prop="`phones.${index}.ext`" label="分机号">
            <el-input v-model="phone.ext"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">提交表单</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        phones: [
          {
            areaCode: '',
            number: '',
            ext: ''
          },
          {
            areaCode: '',
            number: '',
            ext: ''
          },
          {
            areaCode: '',
            number: '',
            ext: ''
          }
        ]
      },
      rules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '长度应在2-10个字符之间', trigger: 'blur' }
        ],
        phones: [
          {
            validator: (rule, value, callback) => {
              if (!value || value.length === 0) {
                callback(new Error('至少需要填写一个电话号码'));
              } else {
                callback();
              }
            }
          }
        ]
      }
    };
  },
  methods: {
    validatePhone(rule, value, callback) {
      if (!value) {
        return callback(new Error('手机号码不能为空'));
      }
      const reg = /^1[3|4|5|6|7|8|9]\d{9}$/;
      if (!reg.test(value)) {
        callback(new Error('您输入的手机号码不合法'));
      } else {
        callback();
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {});
    }
  }
};
</script>

该示例会通过validator自定义校验规则，对输入的电话号码进行校验。其中，号码的校验规则由validatePhone函数实现。

(2). 数组嵌套示例

假设我们现在需要完成一个关于旅游景点的信息录入表单，其中包含景点的名称、地点和包含景点的城市。每个城市由一个名称、一个省份和一个包含景点信息的数组组成，例如：

form: {
  name: '',
  locations: [
    {
      name: '',
      province: '',
      spots: [
        {
          name: '',
          desc: ''
        }
      ]
    }
  ]
};

我们需要对这样一个多层嵌套数组进行校验。下面是示例代码：

<template>
  <el-form :model="form" ref="form" :rules="rules" label-width="80px" style="width: 800px;">
    <el-form-item label="名称" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="旅游地点" prop="locations">
      <el-row v-for="(location, index) in form.locations" :key="index">
        <el-col span="8">
          <el-form-item :prop="`locations.${index}.name`" label="城市名称">
            <el-input v-model="location.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col span="8">
          <el-form-item :prop="`locations.${index}.province`" label="所在省份">
            <el-input v-model="location.province"></el-input>
          </el-form-item>
        </el-col>
        <el-col span="8">
          <el-form-item :prop="`locations.${index}.spots`" label="景点信息">
            <el-row v-for="(spot, spotIndex) in location.spots" :key="spotIndex">
              <el-col :span="spotIndex === 0 ? 9 : 10">
                <el-form-item :prop="`locations.${index}.spots.${spotIndex}.name`" label="景点名称">
                  <el-input v-model="spot.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="spotIndex === 0 ? 15 : 14">
                <el-form-item :prop="`locations.${index}.spots.${spotIndex}.desc`" label="景点描述">
                  <el-input v-model="spot.desc"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">提交表单</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        locations: [
          {
            name: '',
            province: '',
            spots: [
              {
                name: '',
                desc: ''
              }
            ]
          }
        ]
      },
      rules: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '长度应在2-10个字符之间', trigger: 'blur' }
        ],
        locations: [
          {
            validator: (rule, value, callback) => {
              if (!value || value.length === 0) {
                callback(new Error('至少需要填写一个旅游地点'));
              } else {
                callback();
              }
            }
          }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {});
    }
  }
};
</script>

该示例会对所有表单项进行校验，其中locations数组的校验规则为至少需要填写一个旅游地点。在locations中每个城市的子表单都需要一个自定义的prop属性，例如locations.${index}.spots.${spotIndex}.name，表示spots数组中第spotIndex个元素的name属性需要进行校验。同时，在嵌套的子表单中，也需要对每个表单项进行相应的校验规则的定义。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue elementUI 表单校验功能之数组多层嵌套 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月29日
下一篇 2023年5月29日

相关文章

  • Vue 中使用vue2-highcharts实现曲线数据展示的方法

    接下来我将详细讲解“Vue 中使用vue2-highcharts实现曲线数据展示的方法”的完整攻略。首先介绍一下vue2-highcharts，它是一种基于Highcharts的Vue2.x插件，可以在Vue项目中方便地使用Highcharts图表。接下来，我将深入讲解如何使用vue2-highcharts来实现曲线数据展示。 步骤一：安装vue2-high…

    Vue 2023年5月28日
    00

  • vue项目配置eslint保存自动格式化问题

    下面是关于Vue项目配置ESLint保存自动格式化的完整攻略： 安装相关插件 首先，需要在Vue项目中安装eslint和eslint-plugin-prettier两个插件，可以使用npm安装，命令如下： npm install eslint eslint-plugin-prettier –save-dev 配置.eslintrc.js文件 在Vue项目的…

    Vue 2023年5月28日
    00

  • vue项目及axios请求获取数据方式

    Vue.js 是一款流行的前端框架，可以帮助前端开发者构建复杂的单页应用程序。使用 axios 可以方便地获取和传递数据。本文将提供关于 Vue.js 项目及 axios 请求获取数据的完整攻略。 安装 Axios Axios 是一个现代的基于 Promise 的 HTTP 请求库，它用于浏览器和 Node.js。在 Vue.js 项目中使用 Axios，首…

    Vue 2023年5月28日
    00

  • Spring Boot集成Shiro实现动态加载权限的完整步骤

    下面我将为您详细讲解Spring Boot集成Shiro实现动态加载权限的完整步骤。 一、引入依赖 在Spring Boot项目中，需要引入以下依赖： <!– shiro依赖 –> <dependency> <groupId>org.apache.shiro</groupId> <artifactId…

    Vue 2023年5月28日
    00

  • vue 中使用 bimface详情

    首先，需要明确的是，要在Vue中使用Bimface详情，需要引入BimFace的JavaScript SDK，并按照BimFace提供的文档设置好BimFace Viewer所需的DOM容器以及相关参数。接下来，我们将详细讲解该过程。 步骤一：引入BimFace SDK 由于BimFace SDK的体积较大，我们一般会将其放在CDN上，通过Vue的compo…

    Vue 2023年5月28日
    00

  • vue 中使用print.js导出pdf操作

    下面是详细讲解 “Vue 中使用 print.js 导出 PDF 操作” 的完整攻略： 一、什么是 Print.js Print.js 是一个简单的打印插件，可以让你轻松地打印任何元素。不需要额外的 CSS，只需要调用它的 JavaScript 函数即可。此外，它还支持导出为 PDF 格式。 二、安装 Print.js 你可以使用 npm 或直接在 HTML…

    Vue 2023年5月27日
    00

  • vue路由划分模块并自动引入方式

    Vue 路由划分模块并自动引入方式可以让我们在开发过程中更加方便地管理和维护路由，以下是详细攻略： 划分模块 为了更好地管理路由，我们可以将相似的路由放置于同一文件夹中，比如： – src – pages – home – index.vue – children.vue – about – index.vue – children.vue 其中，home …

    Vue 2023年5月28日
    00

  • Vue全家桶实践项目总结(推荐)

    Vue全家桶实践项目总结(推荐) 介绍 本文主要分享一些Vue全家桶实践项目的经验总结，包括Vue、Vue-Router、Vuex、Axios等相关技术的使用。 搭建项目 首先，我们需要通过以下命令来安装Vue脚手架： npm install -g vue-cli 创建一个新的Vue项目： vue init webpack my-project cd my-…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部