【Vue中使用:rules对表单字段进行验证 && Vue校验用户输入不允许和已有数据重复】_six-double-seven_:rules v

网络 02-07 6553

1. Vue校验用户输入不允许和已有数据重复

情况描述

已经读取数据库中的全部type存储在tableData中；【要求】当用户输入的type和数据库中已有的type重复时，给出对应的提示。

解决方法

输入框绑定change函数 @change=‘typeCheck’； <el-form-item label="type" prop="type"> <el-input v-model="dictForm.type" @change='typeCheck'></el-input> </el-form-item> 编写typeCheck (v) ，v为用户的输入；遍历过程中遇到重复情况，使用try catch结束循环，并提示【type】已存在。 typeCheck (v) { try { this.tableData.forEach(item => { if (item.type == v) throw new Error("type-check-error"); }) return true } catch (e) { if (e.message == "type-check-error") { this.$message({ message:'【type】已存在', type: 'warning' }) return false } } } 2. Vue中使用:rules对表单字段进行验证

情况描述

num属性只允许用户输入正整数，其余情况给出提示。

解决方法

绑定 :rules=“rules”； <el-form :model="ruleForm" :rules="rules"> <el-form-item label="数字" prop="num"> <el-input v-model.num="ruleForm.num"></el-input> </el-form-item> 使用正则表达式结合rules的pattern进行校验。 rules: { num: [ { required: true, message: '', trigger: 'blur' }, { required: true, pattern: /^[1-9]\d*$/, message: 'num应为正整数', trigger: 'blur' } ], }