vueフォーム検証

フォーム検証を整理します.インタフェースを通過します.手順は次のとおりです.

refとrulesに注意する必要があります.ModelのvalObjは、refのvalObjとバインドされたオブジェクトです.

検証が必要なフォームにprop=「フィールド名」を追加します.

書く規則:data() { return { rules: ............. } }の中に書く

     rules: {
        name: [{ validator: validateParking, required: true, trigger: 'blur' } ],
        code: [ { validator: validateParking, required: true, trigger: 'blur' } ],
        truckCompany: { //       -      
          id: [{ validator: companyCheck, required: true, trigger: 'change' }]
        },
        phone: [  { validator: phoneCheck, required: true, trigger: 'change' } ]
      }

trigger=>は検証のトリガ方式を表し、blur、change、focusがあります.のよく使われるのはblurとchangeです.

インタフェースで判断する必要がなければ、検証方法を直接書きます.すべての検証方法はdataに書きます.return外:data（）{ var companyCheck = ... return{ }}

    //         
    var companyCheck = (rule, value, callback) => {
      if (value === 0 || value === '') {
        callback(‘     ’)
      } else {
        callback()
      }
    }
    //     
    var phoneCheck = (rule, value, callback) => {
      if (!(/^1(3|4|5|7|8)\d{9}$/.test(value))) {
        callback('         ')
      } else {
        callback()
      }
    }

インタフェースを歩く必要がある場合は、私のプロジェクトのように、名前とコードが唯一であることを保証するために、バックグラウンドインタフェースを歩いて判断します.また、私の検証は追加と編集のポップアップボックスにあるため、以下に2つの部分に分けます.ここではコントラストデータを検証する必要があります~まず、コントラストを行うフィールドを初期化し、return:

      //       
      validateParkingData: {
        name: '',
        code: ''
      }

次に、名前とコードの検証を書きます(上記の検証方法と同じ場所にあります):

     //   
    var validateParking = (rule, value, callback) => {
      if (value === '') {
        if (rule.field === 'name') {
          callback(‘     ’)
        } else if (rule.field === 'code') {
          callback(‘     ’)
        }
      } else if (this.validateParkingData[rule.field] !== value) {
        var postData = {}
        postData[rule.field] = value
        // isExistParking       
        isExistParking(postData).then(response => {
          if (response.data) {
            if (rule.field === 'name') {
              callback(‘      ’)
            } else if (rule.field === 'code') {
              callback(‘      ’)
            }
          } else {
            callback()
          }
        })
      } else {
        callback()
      }
    }

追加されたメソッド:

//       ：
    add() {
   //  this.$nextTick() =>          DOM         。            ，     DOM   
   //   this.nextTick(callback)，       ，       。
   //   this.$nextTick(callback)， dom    ，        。
      this.$nextTick(() => {
        if (this.$refs['valObj'] !== undefined) { //       valObj     
          this.$refs['valObj'].resetFields() //   valObj
        }
      })
      this.validateParkingData['name'] = ''
      this.validateParkingData['code'] = ''
    }

編集方法:

    //   
    edit(row) {
      this.$nextTick(() => {
        if (this.$refs['valObj'] !== undefined) {
          this.$refs['valObj'].resetFields()
          this.validateParkingData['name'] = row.name
          this.validateParkingData['code'] = row.code
          this.valObj = Object.assign({}, row)  //       
        }
      })
    }

提出

    //        
    confirm() {
      this.$refs['valObj'].validate(valid => {
        if (valid) {  // true          
        // confirmApi    ，     
          confirmApi(this.valObj, this.type).then(response => {
            console.log(response)
        } else {
          return false
        }
      })
    }

以上は検証過程全体であり、彼の経緯を中断して見たほうがいい.はっきりするだろう.もちろん、以上は参考までに、実際から出発します.