Element Plus 自定义表单项轻松实现表单验证**

2023-11-01 15:49:13

Element Plus 是一个流行的前端框架，提供了一系列可重用的组件，可帮助您快速构建用户界面。Element Plus 的表单组件非常强大，但有时您可能需要创建自定义表单项。Element Plus 提供了创建自定义表单项的API，让您可以轻松实现表单验证。

创建自定义表单项

const CustomFormItem = {
  name: 'CustomFormItem',
  props: {
    label: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Number, Boolean],
      default: ''
    },
    rules: {
      type: Array,
      default: () => []
    }
  },
  template: `
    <el-form-item :label="label">
      <el-input v-model="value" :rules="rules" />
    </el-form-item>
  `
};

注册自定义表单项

import { App } from 'vue';
import CustomFormItem from './CustomFormItem.vue';

const install = (app: App) => {
  app.component(CustomFormItem.name, CustomFormItem);
};

export default {
  install
};

使用自定义表单项

<template>
  <el-form :model="form" ref="form">
    <custom-form-item label="用户名" v-model="form.username" rules="[/^[a-z0-9]+$/, min: 3, max: 20]" />
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref } from 'vue';
import CustomFormItem from '@/components/CustomFormItem.vue';

export default {
  components: { CustomFormItem },
  setup() {
    const form = ref({});

    const submitForm = () => {
      ref.value.validate((valid) => {
        if (valid) {
          // 表单验证通过，提交表单
        } else {
          // 表单验证失败，提示用户
        }
      });
    };

    return {
      form,
      submitForm
    };
  }
};
</script>

表单验证

您可以使用内置的验证规则或自定义验证规则来验证表单数据。Element Plus 提供了多种内置的验证规则，例如 required、type、min、max 等。您还可以创建自己的自定义验证规则。

const rules = [
  { required: true, message: '用户名不能为空', trigger: 'blur' },
  { type: 'string', message: '用户名必须为字符串', trigger: 'blur' },
  { min: 3, max: 20, message: '用户名长度必须在3到20个字符之间', trigger: 'blur' }
];

提交表单

验证表单数据后，您可以提交表单。您可以使用 Element Plus 的 el-form 组件来提交表单。

<el-form :model="form" ref="form">
  <!-- 表单项 -->
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const form = ref({});

    const submitForm = () => {
      ref.value.validate((valid) => {
        if (valid) {
          // 表单验证通过，提交表单
        } else {
          // 表单验证失败，提示用户
        }
      });
    };

    return {
      form,
      submitForm
    };
  }
};
</script>