javascript - 如何使用 VueJs 阻止文本区域中的某些字符?
问题描述
我有一个用于发送消息的文本区域,我想阻止电子邮件和站点链接。因此,当我使用 v-if 编写@
或https://
必须显示错误消息时,我该怎么做呢?有哪些功能?
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>
解决方案
您可以通过正则表达式类型检查您的情况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>
推荐阅读
- laravel - Laravel - 如何将渲染组件传递给变量?
- java - javax.xml.ws.soap.SOAPFaultException:访问被拒绝
- javascript - CSS光标没有改变外观
- python - 我是否正确使用了python池?
- nsis - 如何在安装程序中存储额外的文本文件
- excel - 遍历表的列并删除行
- reactjs - 在 Enzyme.js 的 `wrapper.find(selector)` 中不能使用变量作为选择器吗?
- node.js - 错误:找不到模块“请求承诺”
- django - 为什么它返回 204 而不是 403?自定义权限不起作用
- javascript - 在页面上将 var 显示为 json