验证部分表单是否重复

1. 效果

• 图片中的名称、机构编码需要进行重复验证

2. 思路及实现

1. 表单验证

• 在获取数据将需要验证的表单数据进行保存

    this.nameChangeTemp = response.data.orgName;this.codeChangeTemp = response.data.orgCode;

• 通过rule对表单进行验证
  以名字的验证为例

    rules: {orgName: [// 设置为必传{ required: true, message: "请输入用户", trigger: 'blur' },// 设置长短{ min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: 'blur' },// 通过方法进行验证{ validator: validateIsReOrgName, trigger: 'blur' }],}...var validateIsReOrgName = (rule, value, callback) => {let obj = {orgName: value}//  如果没有发生编辑，那么就直接返回if (value === this.nameChangeTemp) {callback();return}// 通过接口访问后台，然后确定通过后台的数据，判断是否重复isNameDuplication(obj).then((res) => {if (res.data) {callback(new Error('机构重名，请重新输入'));}callback();})}

1. 更新时，对输入框内容的处理

• 更新时，如果需要验证的内容没有发生改变，那么就不需要传到后台。
• 这儿有两种方式可以知道内容是否发生改变：
  （1）一种是1中验证的时候，然后验证通过设置标志位；
  （2）通过change事件；
  这儿我们通过change事件完成

    // 表单部分，以名称为例<el-form-item label="名称" prop="orgName" ref="orgName"><el-input v-model="form.orgName" placeholder="请输入名称" :disabled="form.orgName==='云课堂'" @change="nameChange"></el-input></el-form-item>......// 事件驱动程序   nameChange () {this.nameChangeMark = true;},codeChange () {this.codeChangeMark= true;}// 进行编辑时的请求，首先通过delete将这两个属性去掉，再根据标志位将对应的属性添加进来let obj = deepClone(this.form) // 这儿对表单里面的数据进行深度赋值delete obj.orgName;delete obj.orgCode;if (this.nameChangeMark) {obj.orgName = this.form.orgName;}if (this.codeChangeMark) {obj.orgCode = this.form.orgCode;}putObj(obj).then(res => {if (!res || res.status !== 200) {this.$message.error(res.message)return}this.showValue();this.$message({message: '更新成功',type: 'success'});});