javascript - 如何在 Vue Js 上只允许数字和字母?
问题描述
我想在字段上只允许name
数字和字母,在字段上number
只允许数字。
我应该怎么做,我在哪里可以看到解释它的文档,比如我的问题?
const app = new Vue({
el: '#app',
data: {
name: null,
number: null
},
methods: {
checkForm: function (e) {
if (this.name) {
return true;
}
if (!this.name) {
console.log("Required");
}
if (this.number) {
return true;
}
if (!this.number) {
console.log("Required");
}
e.preventDefault();
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<form id="app" @submit="checkForm" method="post" novalidate="true">
<p>
<label for="name">Name</label>
<input id="name" v-model="name" type="text" name="name">
<input id="number" v-model="number" type="text" name="number">
</p>
<input type="submit" value="Submit">
</form>
谢谢!
解决方案
有几种方法可以做到这一点,您可以在输入上监听 keypress 事件,然后使用正则表达式检查键是字母还是数字
<template>
<div id="app">
Text & Number Only
<input type="text" v-model="name" v-on:keypress="isLetterOrNumber($event)">
</div>
</template>
<script>
export default {
data: () => ({
name: ""
}),
methods: {
isLetterOrNumber(e) {
let char = String.fromCharCode(e.keyCode);
if (/^[A-Za-z0-9]+$/.test(char)) return true;
else e.preventDefault();
}
}
}
</script>
或者您可以使用计算属性来检查输入值是否仅为字母或数字,这样,用户仍然可以输入除数字和字母以外的任何内容,但会显示错误
<template>
<div id="app">
Text & Number Only (show error):
<input type="text" v-model="name">
<div v-if="!nameValid">NOT VALID!!!</div>
</div>
</template>
<script>
export default {
data: () => ({
name: ""
}),
computed: {
nameValid() {
return /^[A-Za-z0-9]+$/.test(this.name);
}
}
};
</script>
此处示例:https ://codesandbox.io/s/cranky-meadow-0dns8?file=/src/App.vue:0-651
推荐阅读
- android - 如何使用以 TypeScript for Firebase Realtime 数据库编写的云函数从 onCreate 触发之外的节点获取数据?
- go - Golang 中的 bufio.NewReader(os.Stdin) 和 fmt.Scanln() 有什么区别
- graphql - 为 GraphQL 中的所有查询添加架构指令
- exception - 获取 org.xmlpull.v1.XmlPullParserException 错误:未终止的实体引用(位置:TEXT @1:683533 in java.io.InputStreamReader@a4cc4c8)
- webpack - 如何使用 dev-server watch 修复错误?
- android - 应用程序在后台时的 Firebase 控制台消息传递
- language-agnostic - 如何使代码与不同的库版本兼容,以便能够在不同的环境中运行?
- reactjs - 将 props 从父组件传递给子组件并以 redux 形式使用 connect
- react-native - 弹出世博项目后无法运行应用程序
- excel - Excel:在 VBA 中插入包含 excel 公式的新行[更新]