vue2校验新能源车牌号

在 Vue2 中进行新能源车牌号的验证，通常会涉及到正则表达式来检查车牌号码是否符合规定的格式。新能源车牌通常是中国的蓝底白字，格式可以参考以下规则：

1. 前六位为中国行政区划代码，例如“京”、“沪”等；
2. 后五位由字母A-F加上0-9组成，如“D12345”。

下面是一个简单的Vue组件示例，展示了如何使用`v-model`结合自定义的验证函数来进行验证：

<template>
  <div>
    <input type="text" v-model="newEnergyLicense" placeholder="请输入新能源车牌号">
    <p :class="{ error: !isValid }">{{ validationMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newEnergyLicense: '',
      isValid: true,
      validationMessage: '输入有效',
    };
  },
  methods: {
    validateNewEnergyLicense() {
      const regex = /^([A-Z]{1}[A-Za-z]{4}[0-9]{1})$/; // 匹配中国行政区划 + A-F+0-9
      if (!regex.test(this.newEnergyLicense)) {
        this.isValid = false;
        this.validationMessage = '车牌号格式错误，请输入正确的新能源车牌号';
      } else {
        this.validationMessage = '输入有效';
      }
    },
  },
  watch: {
    newEnergyLicense(newValue) {
      this.validateNewEnergyLicense();
    },
  },
};
</script>

<style scoped>
.error {
  color: red;
}
</style>