Vue3对文件编码规则进行验证

你可以在 Vue 3 中使用正则表达式来验证文件编码规则。以下是一个示例代码，展示如何验证格式为 公司代号-部门编号-年份（4位）-顺序号（4位） 的文件编码：

<template>
  <div>
    <el-form :model="form" ref="form">
      <el-form-item label="文件编码" :rules="[{ validator: validateFileCode, trigger: 'blur' }]" prop="fileCode">
        <el-input v-model="form.fileCode" placeholder="请输入文件编码"></el-input>
      </el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form>
  </div>
</template>

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

export default {
  setup() {
    const form = ref({
      fileCode: '',
    });

    const validateFileCode = (rule, value, callback) => {
      // 文件编码规则: 公司代号-部门编号-年份（4位）-顺序号（4位）
      const regex = /^[A-Z]+-(YF|XS|HR)-\d{4}-\d{4}$/;

      if (!value) {
        callback(new Error('文件编码不能为空'));
      } else if (!regex.test(value)) {
        callback(new Error('文件编码格式不正确'));
      } else {
        callback();
      }
    };

    const submitForm = () => {
      form.value.$refs.form.validate((valid) => {
        if (valid) {
          alert('提交成功');
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    };

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

<style>

</style>

解释：

• 正则表达式 ^[A-Z]+-(YF|XS|HR)-\d{4}-\d{4}$ 用于验证文件编码是否符合以下格式：

  • 公司代号：由大写字母组成
  • 部门编号：YF（研发）、XS（销售）、HR（人力资源）之一
  • 年份：4位数字
  • 顺序号：4位数字

• 如果输入的编码格式不符合要求，系统将返回一个错误提示。

你可以根据实际需求修改正则表达式或验证逻辑。