表单校验
校验规则，两个数据不能重复，
表单校验的基本步骤
-
定义验证规则
-
配置模板，使用规则
-
给表单设置
rules属性传入验证的规则// 校验 rules: { // 部门名称校验 name: [ { required: true, message: '部门名称不能为空', trigger: 'blur' }, { min: 1, max: 5, message: '名字必须是1-5之间', trigger: 'blur' } ], // 部门编码校验 code: [ { required: true, message: '部门编码不能为空', trigger: 'blur' }, { min: 1, max: 5, message: '编码必须是1-5之间', trigger: 'blur' } ], // 部门负责人校验 manager: [{ required: true, message: '负责人不能为空', trigger: 'blur' }], // 部门介绍校验 introduce: [ { required: true, message: '部门介绍不能为空', trigger: 'blur' }, { min: 2, max: 300, message: '介绍必须是2-300之间', trigger: 'blur' } ] } -
给表单设置
model属性传入表单数据<template> <div> //最主要的是:rules="rules" 然后在每个标签后写入 prop="rules中定义的属性" <el-form ref="form" :rules="rules" :model="form" label-width="120px"> <el-form-item label="部门名称" prop="name"> <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" /> </el-form-item> <el-form-item label="部门编码" prop="code"> <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" /> </el-form-item> <el-form-item label="部门负责人" prop="manager"> <el-select v-model="form.manager" style="width:80%" placeholder="请选择"> <el-option v-for="item in list" :key="item.id" :value="item.username" :label="item.username" /> </el-select> </el-form-item> <el-form-item label="部门介绍" prop="introduce"> <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" /> </el-form-item> <el-form-item> <el-button type="primary" size="small" @click="onSubmit">{{ isEdit ? '保存修改' : '确定添加' }}</el-button> <el-button size="small" @click="hCancel">取消</el-button> </el-form-item> </el-form> </div> </template>效果图
-
- 给表单中的原宿(Form-Item)设置`prop`属性，其值为设置为需要校验的字段名
```js
onSubmit() {
// if (this.isEdit) {
// this.doEdit()
// } else {
// // 调用接口
// this.doAdd()
// }
this.$refs.form.validate(valid => {
if (valid) {
// 如果通过校验就执行，没有通过不执行
this.isEdit ? this.doEdit() : this.doAdd()
}
})
// 表单校验
},
```
- 手动兜底完成验证
业务相关校验
拿出输入的值，去已有的里面查找，看一下是否一样，如果一样就不可以添加，如果不一样就可以添加，自定义的的校验的规则
-
把父中的数据，精简一下，传给子组件做自定义校验的时候使
- 父组件
<!--把数据传入到子组件中 :origin-list="originList"--> <addor-edit v-if="showDialog" :origin-list="originList" :dep-id="cruId" :is-edit="isEdit" @close="hClose" @success="onSuccess" /> <script> export default{ // 获取数据 async getDepartmentAPI() { const res = await departmentAPI() this.company.id = res.data.companyId this.company.name = res.data.companyName // 删除第一项 res.data.depts.shift() // 简化数据，以便传给子组件做自定义表单校验 this.originList = res.data.depts.map(item => { return { code: item.code, id: item.id, pid: item.pid, name: item.name } }) // 数组转成树 this.list = tarnListToTreeData(res.data.depts) }, } </script> -
部门编号-非重(重复)校验，在自定义校验规则中查找，补充自定义校验
props: {
depId: { type: String, required: true },
// 是否编辑
isEdit: { type: Boolean, required: true },
// 自定义校验
originList: { type: Array, required: true }
},
data() {
const validCode = (rule, value, callback) => {
// console.log('当前的部门编后规则' + value)
const exidtedList = this.originList.map(item => item.code)
console.log(exidtedList)
if (exidtedList.includes(value)) {
// 如果value在originList中可以找到，说明校验失败，这个编号已经被使用过了
callback(new Error('编号' + value + '被占用了'))
} else {
callback()
}
}
return {
list: [],
form: {
code: '', // 非必须 部门编码，同级部门不可重复
introduce: '', // 非必须 介绍
manager: '', // 非必须 负责人名称
name: '', // 非必须 部门名称
pid: '' // 非必须 父级部门ID
},
// 校验
rules: {
// 部门名称校验
name: [
{ required: true, message: '部门名称不能为空', trigger: 'blur' },
{ min: 1, max: 50, message: '名字必须是1-5之间', trigger: 'blur' }
],
// 部门编码校验
code: [
{ required: true, message: '部门编码不能为空', trigger: 'blur' },
{ min: 1, max: 50, message: '编码必须是1-5之间', trigger: 'blur' },
{ validator: validCode, trigger: 'blur' }
],
// 部门负责人校验
manager: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
// 部门介绍校验
introduce: [
{ required: true, message: '部门介绍不能为空', trigger: 'blur' },
{ min: 2, max: 300, message: '介绍必须是2-300之间', trigger: 'blur' }
]
}
}
},
如果是编辑，则在已经占用的编码列表中去掉自己
if (this.isEdit) {
// 从originList中排除当前项filter过当前项的元素
exidtedList = this.originList.filter(item => item.id !== this.depId).map(item => item.code)
}
表单校验-同级不重复
当某个元素在某个同级元素中只能出现一次
// 自定义校验部门名称
const validName = (rule, value, callback) => {
// 找到当前被占用的部门名字列表 ---子部门
const exstedNameList = this.originList.filter(item => item.pid === this.depId).map(item => item.name)
// 判断
if (exstedNameList.includes(value)) {
callback(new Error('部门名字' + value + '被占用'))
} else {
callback()
}
}
如果是编辑，则在已经占用的编码列表中去掉自己
// 找到当前被占用的部门名字列表 ---子部门
let exstedNameList = this.originList.filter(item => item.pid === this.depId).map(item => item.name)
if (this.isEdit) {
// 先找到当前(自己)的id
const cur = this.originList.find(item => item.id === this.depId)
// 找到pid
const pid = cur.pid
// 找到兄弟们
const bro = this.originList.filter(item => item.pid === pid && item.id !== this.depId)
// console.log(bro)
exstedNameList = bro.map(it => it.name)
}
表单校验-清空表单验证的效果
当在编辑的时候，故意清空input框中某些必填项，让表单触发校验失败后，点击添加子部门，发现表单内容及校验项仍在
- 在子组件中使用v-if，上面的问题就不会出现
<!--使用V-if="showDialog"-->
<addor-edit v-if="showDialog" :origin-list="originList" :dep-id="cruId" :is-edit="isEdit" @close="hClose" @success="onSuccess" />
效果图
