使用mixins实现elementUI表单全局验证的解决方法

使用mixins实现elementUI表单全局验证的解决方法

1. 什么是mixins？

在Vue中，mixins是一种可复用功能的方式，其本质是一个对象，在Vue组件中通过mixins属性将其引入，可以让组件具备该对象的属性和方法。

1. elementUI表单全局验证的需求

在使用elementUI的表单组件时，我们往往需要对表单进行全局验证，例如输入框不能为空、手机号码格式正确等。这时候如果每个表单组件都编写相同的验证逻辑，会造成重复代码并且不易维护。因此，我们可以使用mixins来实现表单全局验证的解决方案。

1. 实现过程

实现过程中，需要创建一个名为formMixin.js的mixins文件，用于存放验证逻辑。下面是一个示例代码：

export const formMixin = {
  data() {
    return {
      rules: {
        // 表单验证规则
        // 示例：必填，长度在 3 到 5 个字符之间
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        // 示例：必填，11位手机号码格式
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern: /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/, message: '手机号码格式不正确', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    // 表单验证方法，用于触发表单验证
    validate(callback) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          callback();
        } else {
          this.$message.error('表单验证失败');
          return false;
        }
      });
    },
    // 表单重置方法，用于重置表单内容
    reset() {
      this.$refs.form.resetFields();
    }
  }
};

在创建mixins之后，需要在Vue组件中引入该mixins，并在表单组件中使用。

示例代码：

<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="100px">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="手机号码" prop="phone">
      <el-input v-model="form.phone"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { formMixin } from '@/mixins/formMixin.js';

export default {
  mixins: [formMixin],
  data() {
    return {
      form: {
        name: '',
        phone: ''
      }
    };
  },
  methods: {
    // 提交表单
    submitForm() {
      this.validate(() => {
        this.$message.success('表单验证成功');
      });
    },
    // 重置表单
    resetForm() {
      this.reset();
    }
  }
};
</script>

1. 示例说明

在上面的示例代码中，我们定义了name和phone两个字段的验证规则，并在表单组件中引入该mixins，通过设置rules属性，将验证规则绑定到表单中的字段上。对于表单的提交和重置，我们分别编写了submitForm和resetForm方法，在方法中使用validate和reset方法来触发表单的验证和重置。

示例一：添加“密码”字段并实现密码验证功能

在本示例中，我们添加了一个“密码”字段，并在验证规则中定义了密码不能为空。

示例代码：

<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="100px">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="手机号码" prop="phone">
      <el-input v-model="form.phone"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" show-password></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { formMixin } from '@/mixins/formMixin.js';

export default {
  mixins: [formMixin],
  data() {
    return {
      form: {
        name: '',
        phone: '',
        password: ''
      }
    };
  },
  methods: {
    // 提交表单
    submitForm() {
      this.validate(() => {
        this.$message.success('表单验证成功');
      });
    },
    // 重置表单
    resetForm() {
      this.reset();
    }
  }
};
</script>

示例二：修改“手机号码”字段的验证规则

在本示例中，我们修改了“手机号码”的验证规则，使其只能输入11位数字。

示例代码：

export const formMixin = {
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern: /^[0-9]{11}$/, message: '手机号码格式不正确', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    validate(callback) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          callback();
        } else {
          this.$message.error('表单验证失败');
          return false;
        }
      });
    },
    reset() {
      this.$refs.form.resetFields();
    }
  }
};

在修改了验证规则后，我们仅需重新引入mixins即可。

以上是使用mixins实现elementUI表单全局验证的解决方法的完整攻略。