[英]vue validate input with regex add mask
我有一个验证@blur
的输入字段。
目标是允许 9 个数字按 3 分组,后面有一个点,例如:
123456789
这应该被屏蔽为123.456.789
但是用户自己也应该可以输入123.456.789
。
这是我到目前为止所得到的,我强制用户输入123.456.789
<input
@blur="validateNumber($event.target.value)"
>
validateNumber(value) {
if (/^(\d{3}\.){2}\d{3}$/.test(value)) {
this.validNumber = true;
return;
}
this.validNumber = false;
return;
}
我需要一种方法来允许123456789
并使其成为123.456.789
您可以使用 OR 运算符|
将仅数字检查添加到现有模式
(^\d{9}$)|(^(\d{3}\.){2}\d{3}$)
或者通过两个单独的检查使其更具可读性
if (/^\d{9}$/.test(value) || /^(\d{3}\.){2}\d{3}$/.test(value))
要添加掩码,请分开检查并修改值(如果它是数字),例如:
<input v-model="number" @blur="validateNumber">
data() {
return {
valid: false,
number: "",
};
},
methods: {
validateNumber() {
if (/^\d{9}$/.test(this.number)) {
this.number = this.number.replace(/(\d{3})(\d{3})(\d{3})/, "$1.$2.$3");
this.valid = true;
} else if (/^(\d{3}\.){2}\d{3}$/.test(this.number)) {
this.valid = true;
} else {
this.valid = false;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.