【Vue中使用:rules对表单字段进行验证 && Vue校验用户输入不允许和已有数据重复】
【Vue中使用:rules对表单字段进行验证 && Vue校验用户输入不允许和已有数据重复】
·
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' }
],
}
更多推荐
已为社区贡献4条内容
所有评论(0)