vue 表单验证

整理一下表单验证。要过接口。步骤如下：

<el-form ref="valObj" :model="valObj" :rules="rules">
注意ref 和 rules ，是必须的。 model的valObj是绑定的对象，同ref的valObj。
给需要验证的表单加prop=“字段名”，如下：

             <el-form-item label-width="150px" label="名称" prop="name">
                <el-input v-model="valObj.name" size="mini" />
              </el-form-item>

写规则：
写在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()
      }
    }

若是需要走接口判断的，如我的项目中，名字和代码要保证唯一，所以走后台接口判断。
同时，由于我的验证都在添加和编辑的弹出框中，所以以下分两个部分。在这里就需要校验对比数据啦~
首先，初始化要进行对比的字段，在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
        }
      })
    }

以上就是整个验证过程，最好还是打断点看他的经过，会很清晰。当然，以上仅供参考，从实际出发。

猜你喜欢