Element-Plus/Ui 单个input输入框(脱离表单的),添加校验

我司开的黄金项目需要在表格里面添加输入框并且需要校验用户输入的类型以及默认值

亲测有效 vue2和vue3都可以用 开箱即用

545a16c11034433f90a3f7ead11364ab.png

这个时候我们就需要用到oninput事件了

1.只能输入正整数且默认值是1 (栗子 后面的写法只需要更改oninput对应的函数即可)

 <el-input oninput="value = Number(value) || 1"  v-model="row.inventory"/>

2.只能输入正整数

oninput ="value=value.replace(/[^\d]/g,'')"

3.只允许输入正整数和正小数

oninput ="value=value.replace(/[^0-9.]/g,'')"

4.只允许输入正整数和正小数且小数只保留2位数

  oninput="value = value.replace(/[^0-9.]/g, ''); if(value.indexOf('.') > 0) { value = value.slice(0, value.indexOf('.') + 3); } else { value = value.slice(0, value.length); }"

4.只允许输入正整数和正小数且小数只保留2位数同时默认值是1

  oninput="value = value.replace(/[^0-9.]/g, '')|| 1; if(value.indexOf('.') > 0) { value = value.slice(0, value.indexOf('.') + 3); } else { value = value.slice(0, value.length); }"

 

 

Element Plus中,如果你需要对表单输入框进行校验,确保用户输入的是大于600的整数,你可以使用Vuelidate或VeeValidate这样的表单验证库来进行校验。 使用Vuelidate时,你可以通过定义一个特定的属性来存储校验规则,并在模板中使用`v-validate`指令来指定校验规则。以下是一个简单的示例: ```vue <template> <el-form ref="form" :model="form" label-width="100px"> <el-form-item label="输入框"> <el-input v-model.number="form.number" v-validate="'required|integer|min:600'"></el-input> <span class="el-form-error" v-if="errors.has('number')">{{ errors.first('number') }}</span> </el-form-item> </el-form> </template> <script> import { required, integer, min } from 'vuelidate/lib/validators'; export default { data() { return { form: { number: null } }; }, validations: { form: { number: { required, integer, min: min(600) } } } }; </script> ``` 在这个例子中,我们定义了一个名为`form`的数据对象,其中包含一个`number`属性。我们通过`v-model.number`确保输入值是一个数字,并通过`v-validate`指令来应用规则。这些规则包括`required`(必填)、`integer`(必须是整数)和`min(600)`(必须大于或等于600)。 如果你使用的是VeeValidate,可以这样写: ```vue <template> <el-form ref="form" :model="form" label-width="100px"> <el-form-item label="输入框"> <el-input v-model="form.number"></el-input> <el-form-item v-if="errors.has('number')" class="error"> <el-error>{{ errors.first('number') }}</el-error> </el-form-item> </el-form-item> </el-form> </template> <script> import { required, integer, min } from 'vee-validate/dist/rules'; import { extend } from 'vee-validate'; // 添加需要的校验规则 extend('required', required); extend('integer', integer); extend('min', min); export default { data() { return { form: { number: null } }; }, rules: { number: 'required|integer|min:600' } }; </script> ``` 在这个例子中,我们使用了VeeValidate的`rules`属性来定义校验规则,并通过`el-error`组件来显示错误信息。 请注意,Element Plus原生的表单验证是基于HTML5的验证属性,如`required`, `type`, `pattern`等,但对于复杂的校验逻辑,如必须是大于600的整数,使用Vuelidate或VeeValidate这样的库会更加方便。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值