输入表单是网页的基本模块。用户输入数据，浏览器在验证失败时显示错误，提交表单时将数据提交给服务器。
这些表单包含不同的输入控制类型，可以接受字符串或数字。
在这篇文章中，我们将学习如何在Vuejs应用程序中进行只接受数字的输入验证，它还包括在存在验证错误时显示一个错误。
在Vuejs中，这可以通过多种方式实现--使用keypress键码、正则表达式和npm库如vue-numeric。
你可以在Github上看到完整的代码
其他版本可供选择。
首先，让我们开始创建一个应用程序，编写一个vuejs组件
使用cli命令创建新的VueJS应用程序
首先，请在控制台中查看vue -version命令，以确定vue cli是否已安装。
B:>vue --version
@vue/cli 4.5.9
如果它给出了版本号，说明vue已经安装了，如果vue命令在控制台中没有发现错误，请使用以下命令安装vue cli。
npm install -g @vue/cli
它在你的机器上安装了vue工具。
使用vue命令创建Vue应用程序是很容易的。
vue create vue-input-example -n
现在应用程序已经准备好开始运行了。
首先进入根文件夹，运行npm run serve命令。
cd vue-input-example
npm run serve
应用程序已经启动并运行，可以访问应用程序https://localhost:8080
限制只输入数字，不接受字母字符
这个例子只接受数字，不允许其他字符。
让我们为这个例子创建Component。
- 组件名称为InputNumber，位于src/component文件夹中。
声明输入类型为文本，并添加@keypress事件
<input id="number" @keypress="validateNumber" />
@keypress是一个javascript事件，每当按键被按下时就会被调用。validateNumber是在组件的方法部分定义的事件处理程序。键盘上的数字键码是48到57，这意味着输入框不允许有其他键码。由于keyPressed直接连接到DOM，任何改变都会刷新页面，event.preventDefault可以不重新加载页面。
methods: {
validateNumber: (event) => {
let keyCode = event.keyCode;
if (keyCode < 48 || keyCode > 57) {
event.preventDefault();
}
},
},
完整的InputNumber组件的代码。
<template>
<div>
<h3>Vuejs Input Number Validation example</h3>
<input id="number" @keypress="validateNumber" />
</div>
</template>
<script>
export default {
name: "InputNumber",
data() {
return {};
},
methods: {
validateNumber: event => {
let keyCode = event.keyCode;
if (keyCode < 48 || keyCode > 57) {
event.preventDefault();
}
}
}
};
</script>
<style scoped></style>
由于keyCode不是正确的处理方式，因为这将依赖于硬件的按键代码。
让我们尝试使用另一种方法，使用正则表达式
使用正则表达式
在vue的方法中，用正则表达式代替keycode逻辑
数字的正则表达式是/[0-9]/
在方法中，获取关键字符并根据正则表达式进行验证，如果没有通过，就不接受。
validateNumber: event => {
const charCode = String.fromCharCode(event.keyCode);
if (!/[0-9]/.test(charCode)) {
event.preventDefault();
}
}
验证时输入数字错误
这个例子只对数字进行输入表单验证并显示错误。
在模板中声明了一个模型mynumber，从模板传递到控制器，在数据函数中返回mynumber和isValid的默认值 添加了**@input和@change事件来处理输入变化。在这个事件处理程序中，根据正则表达式检查输入的值 最后使用v-if指令**显示错误
<template>
<div class="hello">
<h3>Vuejs Input type number validation</h3>
<br />
<input type="text" placeholder="Enter Number" v-model="mynumber" @input="change($event)"
@change="change($event)"/>
<div class="error" v-if="!isValid">Number is Invalid</div
</div>
</template>
<script>
export default {
name: "InputNumberError",
data() {
return {
mynumber: "",
isValid: true,
regex: /[0-9]/
};
},
methods: {
change:function(e){
const number = e.target.value
this.isNumberValid(number);
},
isNumberValid: function(inputNumber) {
this.isValid= this.regex.test(inputNumber)
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.error{
color:red;
}
</style>
用户可以在浏览器中看到输出如下
结论
这是type=url的简单输入表单验证，尽管我们可以为复杂的表单编写自定义验证，然而，Node提供了不同的框架veevalidate 和joi 库来简化它。
