驗證部分表單是否重復

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'});});