【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' }
],
}