如何从common.js文件中为所有Vue文件调用验证规则？

Got it, let's break down exactly how to move your validation rules from addEmployee.vue into a reusable common.js file, so you can easily reuse them across all your Vue components (like addClient.vue):

Step 1: Create/Update common.js with Reusable Validation Rules #

First, pick a directory in your project (usually something like src/utils/ for utility files) and create or update common.js to export your validation rules. You can structure this as a static object for universal rules, or use functions if you need dynamic customization per component.

Here's an example based on typical employee/client form fields:

// src/utils/common.js
// Universal form validation rules
export const formValidationRules = {
  // Name: Required, 2-20 characters
  name: [
    { required: true, message: 'Please enter a name', trigger: 'blur' },
    { min: 2, max: 20, message: 'Name must be 2-20 characters long', trigger: 'blur' }
  ],
  // Email: Required, valid format
  email: [
    { required: true, message: 'Please enter an email', trigger: 'blur' },
    { type: 'email', message: 'Please enter a valid email address', trigger: ['blur', 'change'] }
  ],
  // Phone number: Required, matches standard mobile format (adjust regex as needed)
  phone: [
    { required: true, message: 'Please enter a phone number', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: 'Please enter a valid mobile number', trigger: 'blur' }
  ],
  // Generic required rule for any field
  required: [
    { required: true, message: 'This field is required', trigger: 'blur' }
  ]
};

// Dynamic rule generator (for custom error messages)
export const generateRequiredRule = (customMessage = 'This field is required') => {
  return [{ required: true, message: customMessage, trigger: 'blur' }];
};

Step 2: Import and Use Rules in Your Vue Components #

Now, replace the local validation rules in addEmployee.vue and addClient.vue with the imported ones from common.js.

Example in addEmployee.vue:

<template>
  <b-card>
    <h4 slot="header" class="card-title">Employee</h4>
    <b-row>
      <b-col sm="3">
        <b-form-group label="Name">
          <b-form-input v-model="form.name" :rules="validationRules.name"></b-form-input>
        </b-form-group>
      </b-col>
      <b-col sm="3">
        <b-form-group label="Email">
          <b-form-input v-model="form.email" :rules="validationRules.email"></b-form-input>
        </b-form-group>
      </b-col>
      <!-- Add more fields as needed -->
    </b-row>
  </b-card>
</template>

<script>
// Import the shared rules
import { formValidationRules } from '@/utils/common.js';

export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      },
      validationRules: {
        // Spread the universal rules
        ...formValidationRules,
        // Add component-specific rules here if needed
        employeeId: [
          { required: true, message: 'Please enter employee ID', trigger: 'blur' },
          { pattern: /^EMP\d{4}$/, message: 'ID must start with EMP followed by 4 digits', trigger: 'blur' }
        ]
      }
    };
  }
};
</script>

Example in addClient.vue:

<template>
  <b-card>
    <h4 slot="header" class="card-title">Client</h4>
    <b-row>
      <b-col sm="3">
        <b-form-group label="Client Name">
          <b-form-input v-model="form.clientName" :rules="validationRules.name"></b-form-input>
        </b-form-group>
      </b-col>
      <b-col sm="3">
        <b-form-group label="Contact Email">
          <b-form-input v-model="form.contactEmail" :rules="validationRules.email"></b-form-input>
        </b-form-group>
      </b-col>
      <b-col sm="3">
        <b-form-group label="Company">
          <b-form-input v-model="form.company" :rules="validationRules.company"></b-form-input>
        </b-form-group>
      </b-col>
    </b-row>
  </b-card>
</template>

<script>
import { formValidationRules, generateRequiredRule } from '@/utils/common.js';

export default {
  data() {
    return {
      form: {
        clientName: '',
        contactEmail: '',
        company: ''
      },
      validationRules: {
        ...formValidationRules,
        // Use the dynamic generator for a custom error message
        company: generateRequiredRule('Please enter the client\'s company name')
      }
    };
  }
};
</script>

Quick Tips for Maintenance #

• If you're using Vue 3's Composition API, the import process is nearly identical—just import the rules in your setup() function and return them to use in the template.
• You can also extract common regex patterns (like phone/email) into common.js to keep validation logic consistent across components.
• For async validation (like checking if an email already exists), wrap that logic in a function in common.js and import it into components as needed.

内容的提问来源于stack exchange，提问作者Ashwini