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

elementUI动态嵌套el-form表单校验举例详解

• JavaScript
yizhihongxing

ElementUI 动态嵌套 el-form 表单校验举例详解

简介

在 ElementUI 中，el-form 是常用的表单组件，用于进行数据录入和数据校验。但是，当表单复杂度较高，需要动态增加或删除表单项时，我们需要使用动态嵌套来实现。本篇文章将详细讲解 ElementUI 动态嵌套 el-form 表单校验的实现方法，包括基础使用方法、动态增加表单项、删除表单项、自定义校验规则等。

基础使用方法

在 ElementUI 中，el-form 的基础使用方法如下：

<el-form :model="form" :rules="rules" ref="form">
  <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-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

其中，<el-form> 标签的 :model 属性用于绑定表单数据对象，:rules 属性用于绑定表单校验规则，ref 属性用于在组件中获取表单对象。<el-form-item> 标签用于包裹表单项，label 属性用于显示表单项名称，prop 属性用于绑定表单项字段名。<el-input> 标签用于输入表单项的值，v-model 指令用于绑定表单项的值。

在表单提交时，我们需要调用 submitForm 方法，通过 ref 属性获取表单对象，然后调用 validate 方法进行表单校验。

methods: {
  submitForm() {
    this.$refs.form.validate((valid) => {
      if (valid) {
        // 表单校验通过，提交表单数据
      } else {
        // 表单校验失败
      }
    });
  }
}

validate 方法接收一个回调函数作为参数，回调函数的参数 valid 为布尔值，表示表单校验是否通过。

动态增加表单项

在 ElementUI 中，动态增加表单项需要注意以下几点：

  1. 新增表单项需要添加至 rules 属性的校验规则中。

  2. 表单数据对象需要动态添加新增表单项的属性。

  3. 表单项需要动态生成，且需要绑定新生成的表单数据属性。

以下为新增输入多个电话号码的示例代码：

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <div v-for="(phone, index) in form.phones" :key="index">
      <el-form-item :label="`电话号码${index + 1}`" :prop="`phone${index + 1}`">
        <el-input v-model="phone"></el-input>
      </el-form-item>
      <el-button type="danger" size="small" icon="el-icon-delete" @click="removePhone(index)"></el-button>
    </div>
    <el-form-item>
      <el-button type="primary" @click="addPhone">添加电话号码</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        phones: []
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        phone1: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { pattern: /^1[0-9]{10}$/, message: '请输入正确的电话号码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 添加电话号码表单项
    addPhone() {
      const len = this.form.phones.length;
      this.form.phones.push('');
      this.$set(this.rules, `phone${len + 1}`, [
        { required: true, message: '请输入电话号码', trigger: 'blur' },
        { pattern: /^1[0-9]{10}$/, message: '请输入正确的电话号码', trigger: 'blur' }
      ]);
    },
    // 删除电话号码表单项
    removePhone(index) {
      this.form.phones.splice(index, 1);
      delete this.rules[`phone${index + 1}`];
    },
    // 提交表单数据
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单校验通过，提交表单数据
        } else {
          // 表单校验失败
        }
      });
    }
  }
}
</script>

在示例代码中，我们使用 v-for 指令动态生成多个表单项，每个表单项都需要动态生成校验规则。在 addPhone 方法中，我们通过 push 方法动态添加电话号码表单数据属性，通过 $set 方法动态添加电话号码的校验规则至 rules 属性中。在 removePhone 方法中，我们使用 splice 方法动态删除电话号码表单数据属性，通过 delete 方法动态删除电话号码的校验规则。

删除表单项

在 ElementUI 中，删除表单项需要注意以下几点：

  1. 删除表单项需要从 rules 属性的校验规则中删除。

  2. 需要删除表单数据对象中的对应属性。

  3. 表单项需要动态删除。

以下为删除多个电话号码的示例代码：

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <div v-for="(phone, index) in form.phones" :key="index">
      <el-form-item :label="`电话号码${index + 1}`" :prop="`phone${index + 1}`">
        <el-input v-model="phone"></el-input>
      </el-form-item>
      <el-button type="danger" size="small" icon="el-icon-delete" @click="removePhone(index)"></el-button>
    </div>
    <el-form-item>
      <el-button type="primary" @click="addPhone">添加电话号码</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        phones: []
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        phone1: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { pattern: /^1[0-9]{10}$/, message: '请输入正确的电话号码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 添加电话号码表单项
    addPhone() {
      const len = this.form.phones.length;
      this.form.phones.push('');
      this.$set(this.rules, `phone${len + 1}`, [
        { required: true, message: '请输入电话号码', trigger: 'blur' },
        { pattern: /^1[0-9]{10}$/, message: '请输入正确的电话号码', trigger: 'blur' }
      ]);
    },
    // 删除电话号码表单项
    removePhone(index) {
      this.form.phones.splice(index, 1);
      delete this.rules[`phone${index + 1}`];
    },
    // 提交表单数据
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单校验通过，提交表单数据
        } else {
          // 表单校验失败
        }
      });
    }
  }
}
</script>

在示例代码中，我们使用 v-for 指令动态生成多个表单项，每个表单项都需要动态生成校验规则。在 addPhone 方法中，我们通过 push 方法动态添加电话号码表单数据属性，通过 $set 方法动态添加电话号码的校验规则至 rules 属性中。在 removePhone 方法中，我们使用 splice 方法动态删除电话号码表单数据属性，通过 delete 方法动态删除电话号码的校验规则。

自定义校验规则

在 ElementUI 中，我们可以通过 validator 属性自定义表单项的校验规则。以下为自定义身份证号码校验规则的示例代码：

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="身份证号码" prop="id">
      <el-input v-model="form.id" :validator="validateId"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        id: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        id: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
          { validator: this.validateId, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 校验身份证号码
    validateId(rule, value, callback) {
      if (!value) {
        return callback(new Error('请输入身份证号码'));
      }
      if (!/^[1-9][0-9]{5}(19|20)[0-9]{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])[0-9]{3}[0-9xX]$/.test(value)) {
        callback(new Error('请输入正确的身份证号码'));
      } else {
        callback();
      }
    },
    // 提交表单数据
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单校验通过，提交表单数据
        } else {
          // 表单校验失败
        }
      });
    }
  }
}
</script>

在示例代码中，我们使用 <el-input> 标签的 :validator 属性对身份证号码进行校验。在 validateId 方法中，我们使用正则表达式对身份证号码进行格式校验，校验失败则通过回调函数返回错误信息。

结语

本篇文章详细讲解了 ElementUI 动态嵌套 el-form 表单校验的实现方法，包括基础使用方法、动态增加表单项、删除表单项、自定义校验规则等。希望能对大家在日常前端开发中遇到的类似问题有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：elementUI动态嵌套el-form表单校验举例详解 - Python技术站

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

相关文章

  • json文件书写格式详解

    下面就来详细讲解一下“JSON文件书写格式详解”的完整攻略。 什么是JSON？ 首先我们需要先了解一下什么是JSON。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于JavaScript语言的一个子集，易于人类阅读和编写。JSON格式的数据在网络传输或存储过程中，经常被应用于异构系统间的数据交换，是目前广泛使…

    JavaScript 2023年5月27日
    00

  • javascript绘制漂亮的心型线效果完整实例

    下面是详细讲解“javascript绘制漂亮的心型线效果完整实例”的完整攻略。 1. 前期准备 在绘制心型线前，我们需要有基本的html文件和css样式文件。html文件中需要添加一个canvas标签，而css样式设置canvas标签为画布，并赋予宽度和高度。代码如下： <!DOCTYPE html> <html lang="en…

    JavaScript 2023年6月10日
    00

  • javascript二维数组和对象的深拷贝与浅拷贝实例分析

    JavaScript二维数组和对象的深拷贝与浅拷贝实例分析 概述 在JavaScript中，数组和对象是两个广泛使用的数据结构，它们在实际开发中经常需要进行拷贝操作。拷贝操作没有统一的标准，被分为深拷贝和浅拷贝两种类型。当数组或对象中的元素比较简单时，使用浅拷贝已经能满足需求。但若数组或对象中存在嵌套的元素，使用浅拷贝时会出现意想不到的结果。此时需要使用深拷…

    JavaScript 2023年6月10日
    00

  • 微信小程序开发之表单验证WxValidate使用

    微信小程序开发之表单验证WxValidate使用 在微信小程序中，我们经常会遇到需要表单验证的情况，如注册、登录、提交订单等功能，此时，可以使用一个名为WxValidate的表单验证插件来方便地解决这个问题。 WxValidate的安装及引用 下载WxValidate插件并解压，将插件中的WxValidate.js文件拷贝到小程序项目的utils目录下。 在…

    JavaScript 2023年6月10日
    00

  • 也说JavaScript中String类的replace函数

    请允许我详细讲解“也说JavaScript中String类的replace函数”的完整攻略。 了解replace函数 首先，我们需要了解一下JavaScript中，String类的replace函数是什么。 replace函数是一个用于替换字符串的工具函数，它的用法如下： str.replace(regexp|substr, newSubStr|functi…

    JavaScript 2023年5月28日
    00

  • JavaScript函数、闭包、原型、面向对象学习笔记

    JavaScript函数学习笔记 什么是函数 函数是 JavaScript 中的一个代码块，它可以重复执行，并且可通过传入参数和返回值来实现对信息的处理和存储。 函数的定义方式 JavaScript 中有多种定义函数的方式，以下是其中常用的三种方式： 1. 函数声明 使用 function 关键字定义的函数，代码如下： function functionNa…

    JavaScript 2023年5月27日
    00

  • javascript中类的定义方式详解(四种方式)

    下面是“JavaScript中类的定义方式详解(四种方式)”的完整攻略。 1. ES6中的class关键字 在ES6中添加了class关键字，使得JavaScript也具有了面向对象编程的能力。 使用class定义一个类，实例化一个类用关键字new来实现。 class Person { constructor(name, age) { this.name =…

    JavaScript 2023年5月27日
    00

  • JS实现探测网站链接的方法【测试可用】

    非常感谢您对该篇文章的关注和探究。本篇文章将详细介绍如何通过JS实现探测网站链接的方法。 前言 在现代Web开发中，许多应用程序都需要通过链接访问其他资源。尤其是在网站开发中，网站链接是非常常用的功能之一。那么如何通过JS实现对链接的探测呢？在本文中，我们将答疑解惑，为您提供一份可实践的完整攻略。 准备工作 为了实现探测链接的功能，首先需要准备一下所需的工具…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部