- 此问题在此处已有答案**：
Template literal inside of the RegEx（2个答案）
昨天关门了。
我在输入字段上设置了一个验证规则，它最多允许键入三个单词，我使用正则表达式规则（/^\s*(?:\S+(?:\s+\S+){0,2}\s*)?$/）来验证这一点。
现在我不想硬编码这个最大值3，然后像{0, 2}这样使用它，所以我动态地传递这个值，然后在正则表达式中使用它，但是正则表达式不能正常工作，我也不知道它的语法是否正确。
我尝试了以下语法，但没有任何效果-
1. `${/^\s*(?:\S+(?:\s+\S+){0,${max-1}}\s*)?$/}`
2. /`${^\s*(?:\S+(?:\s+\S+){0,${max-1}}\s*)?$}`/
3. new RegExp(`${/^\s*(?:\S+(?:\s+\S+){0,${max-1}}\s*)?$/}`)我也试着研究类似的问题，但运气不佳。
下面是一个使用硬编码正则表达式和动态正则表达式的示例。
- 测试问题的步骤-**
1.尝试在第一次输入中键入3个以上的单词，它应该会抛出错误"Max 3 words are allowed"。（工作正常）
1.尝试在第二个输入中键入任何内容，它将从一开始就抛出错误。（不工作）
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<v-app>
<h3>
Hardcoded Max Limit (Working)</h1>
<v-text-field
v-model="queryH"
:rules="[rules.maxWordsH()]"
dense
></v-text-field>
<h3 class="red--text">
Dynamic Max Limit (Not Working)</h1>
<v-text-field
v-model="queryD"
:rules="[rules.maxWordsD(3)]"
dense
></v-text-field>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
queryH: null,
queryD: null,
rules: {
maxWordsH() {
return (v) =>
(v || "").match(/^\s*(?:\S+(?:\s+\S+){0,2}\s*)?$/) ?
true :
"Max " + 3 + " words are allowed";
},
maxWordsD(max) {
return (v) =>
(v || "").match(`${/^\s*(?:\S+(?:\s+\S+){0,${max-1}}\s*)?$/}`) ?
true :
"Max " + max + " words are allowed";
},
},
};
},
})
</script>
</body>
</html>
1条答案
按热度按时间krcsximq1#
您可以尝试这样做。当使用构造函数时，常规的字符串转义规则（当特殊字符包含在字符串中时，在特殊字符前面加上\）是必要的。