vue2表单校验拆成单独文件

1. 在validators文件下新建CountryManage.js 定义校验规则

export default {

    // 国家代码
    countryCode (rule, value, callback) {
        const text = this.$t('page.countryCode')
        const len = 10
        if (!value || !value?.trim()) return callback(new Error(this.$t('input.pleaseEnter') + text))
        if (value?.trim().length > len) return callback(new Error(this.$t('input.lengthMax') + len + this.$t('input.digits')))
        if (!/^[a-zA-Z0-9]+$/.test(value?.trim())) return callback(new Error(this.$t('input.only_English_and_numbers')))
        callback()
    },

    // 国家名称
    countryName (rule, value, callback) {
        const text = this.$t('page.countryName')
        const len = 100
        if (!value || !value?.trim()) return callback(new Error(this.$t('input.pleaseEnter') + text))
        if (value?.trim().length > len) return callback(new Error(this.$t('input.lengthMax') + len + this.$t('input.digits')))
        if (!/^[\u4e00-\u9fa5a-zA-Z0-9]+$/.test(value?.trim())) return callback(new Error(this.$t('input.only_Chinese_and_English_and_numbers')))
        callback()
    }
}

2. 在文件中使用

<template>
    <el-form
        :model="formData" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item :label="$t('page.countryCode')" prop="countryCode">
            <el-input v-model.trim="formData.countryCode" :placeholder="$t('input.pleaseEnter') + $t('page.countryCode')">
            </el-input>
        </el-form-item>
        <el-form-item :label="$t('page.countryName')" prop="countryName">
            <el-input v-model="formData.countryName" :placeholder="$t('input.pleaseEnter') + $t('page.countryName')"></el-input>
        </el-form-item>
    </el-form>
</template>

import validators from '@/validators/CountryManage'

data () {
    return {
        formData: {
            countryCode: '',
            countryName: ''
        },
        rules: {
            countryCode: { required: true, validator: validators.countryCode.bind(this), trigger: 'blur' },
            countryName: { required: true, validator: validators.countryName.bind(this), trigger: 'blur' }
        }
    }
}