vue2点击保存,判断重量不能为空 必须是数字 大于0的数字,如果有小数,只能两位小数
时间: 2024-02-21 19:58:47 浏览: 21
可以使用 Vue.js 中的表单验证来实现这个功能。你需要在表单中添加一个输入框,然后使用 Vue.js 提供的 validate 规则来验证输入的值是否合法。
以下是一个示例代码:
```html
<template>
<div>
<form @submit.prevent="submitForm">
<label for="weight">重量:</label>
<input id="weight" v-model="weight" type="text" />
<span v-if="errors.weight" class="error">{{ errors.weight }}</span>
<button type="submit">保存</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
weight: '',
errors: {}
}
},
methods: {
submitForm() {
this.errors = {}
if (!this.weight) {
this.errors.weight = '重量不能为空'
} else if (!/^\d+(\.\d{1,2})?$/.test(this.weight)) {
this.errors.weight = '重量必须是大于0的数字,最多两位小数'
} else if (parseFloat(this.weight) <= 0) {
this.errors.weight = '重量必须是大于0的数字'
} else {
// 表单验证通过,可以进行提交操作
// ...
}
}
}
}
</script>
<style>
.error {
color: red;
}
</style>
```
这个示例代码中,使用了一个 data 对象来存储输入框中的值和错误信息。在 submitForm 方法中,先清空错误信息,然后对输入的值进行验证。如果验证不通过,则将错误信息保存在 errors 对象中,并在页面上显示出来;如果验证通过,则可以进行表单提交操作。在页面上,使用 v-if 指令来判断是否需要显示错误信息。