我有一个用于发送消息的文本区域,我想阻止电子邮件和站点链接。因此,当我编写@
或https://
时,必须使用v-if显示错误消息,但是我该怎么做?哪些功能?
new Vue({
el: "#app",
data: {
message: {
content: ""
}
},
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<textarea v-bind="message" v-model="message.content" cols="30" rows="10">
</textarea>
<p v-if="message.content == '@'">
No special characters
</p>
</div>
</div>
答案 0 :(得分:2)
您可以按正则表达式类型检查条件var regex = /(@|https)/g;
。同时设置hasError
数据以进行消息显示控制,您可以使用vue watch
进行数据更改(message.content)
new Vue({
el: "#app",
data: {
message: {
content: ""
},
hasError: false
},
watch: {
'message.content': function(newVal,oldVal) {
var regex = /(@|https)/g;
this.hasError = newVal.match(regex);
}
}
})
body {
background: #20262E;
padding: 10px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 10px;
transition: all 0.2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<textarea v-bind="message" v-model="message.content" cols="30" rows="5">
</textarea>
<p v-if="hasError">
No special characters
</p>
</div>
</div>
答案 1 :(得分:0)
我认为您应该在textarea中添加方法@change或@input,然后使用正则表达式测试所有内容,而不是替换它或您想要执行的任何操作