如何使用Vuetify校验规则实现AB-12345678格式的字母数字组合校验

最简洁的实现方式是使用正则表达式完成格式匹配，无需逐个字符判断，具体实现如下：

1. 核心正则规则 #

你需要的格式匹配正则为：/^[a-zA-Z]{2}-\d{8}$/，各部分含义：

• 开头的^和结尾的$限定完整字符串匹配，避免出现前后有多余字符仍判定符合规则的情况
• [a-zA-Z]{2}匹配2位大小写字母，若要求仅大写可修改为[A-Z]{2}
• -匹配固定连字符
• \d{8}匹配8位数字

2. Vuetify 规则绑定代码 #

模板部分 #

<v-text-field
  v-model="serialNumber"
  label="业务编号"
  :rules="serialNumberRules"
  placeholder="示例：AB-12345678"
></v-text-field>

规则定义部分 #

// Vue3 组合式API示例
const serialNumber = ref('')
const serialNumberRules = [
  value => !!value || '请输入业务编号',
  value => /^[a-zA-Z]{2}-\d{8}$/.test(value) || '格式错误，请输入 两位字母-8位数字 格式的内容'
]

// Vue2 选项式API示例
/*
export default {
  data() {
    return {
      serialNumber: '',
      serialNumberRules: [
        v => !!v || '请输入业务编号',
        v => /^[a-zA-Z]{2}-\d{8}$/.test(v) || '格式错误，请输入 两位字母-8位数字 格式的内容'
      ]
    }
  }
}
*/

额外说明 #

如果需要允许输入内容前后带空格，可以在校验前先调用trim()方法，修改为/^[a-zA-Z]{2}-\d{8}$/.test(value.trim())即可。

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