如何使用 Regex 进行自定义输入字段验证？我希望输入字段只有前 3 个输入作为字母，后 3 个输入作为数字，用“-”分隔。我想在使用尝试输入内容的同时验证它。
我只找到了验证数字的解决方案，但是当我尝试对字母和数字使用相同的代码时，它不起作用。此外，我希望输入字段验证每个击键。
<template>
<div class="mt-6">
<input
type="text"
:placeholder="number_template"
class="w-56 text-2xl bg-grat-300 p-3 rounded-lg focus:outline-none"
v-model="number"
/>
<br /><br />
<input
type="text"
:placeholder="reg_template"
class="w-56 text-2xl bg-grat-300 p-3 rounded-lg focus:outline-none"
v-model="number_plate"
/>
</div>
</template>
<script>
export default {
props: ['number_template', 'reg_template'],
data: function() {
return {
number: '',
number_format: '', // number pattern for now XXX-XXX
regex: '', //regex for number pattern
reg_regex: '', // regex for registration plate number
reg_format: '', // pattern for registration number for now XXX-XXX (first 3 are letters and last 3 are numbers)
number_plate: ''
};
},
mounted() {
let x = 1;
this.format = this.number_template.replace(/X+/g, () => '$' + x++);
console.log(this.format);
this.number_template.match(/X+/g).forEach((char, key) => {
this.regex += '(d{' + char.length + '})?';
console.log(this.regex);
console.log(char.length);
console.log(key);
});
let y = 1;
this.reg_format = this.reg_template.replace(/X+/g, () => '$' + y++);
console.log(this.reg_format);
this.reg_template.match(/X+/g).forEach((char, key) => {
this.reg_regex += '(d{' + char.length + '})?';
console.log(this.reg_regex);
console.log(char.length);
console.log(key);
});
},
watch: {
number() {
this.number = this.number
.replace(/[^0-9]/g, '')
.replace(/^(\d{3})?(\d{3})/g, this.format)
.substr(0, this.number_template.length);
},
number_plate() {
this.number_plate = this.number_plate
.replace(/([A-Z]{3})?(d{3})/g, this.format)
.substr(0, this.reg_template.length);
}
}
};
</script>此代码适用于第一个输入字段，但不适用于第二个输入字段。我可能需要更改挂载函数中的某些内容，它试图匹配 reg_regex 但我不知道如何去做。