element form表单验证无效

微wx笑 2021-02-23【前端开发】492 4 0关键字： element form 表单验证

element form表单验证无效，添加了验证规则，但是提交时页面不提示，而且还能提交成功。

1、el-form
2、el-form-item
3、data “postForm”
4、data “rules”
5、验证不通过还能提交的问题

element form表单验证无效，添加了验证规则，但是提交时页面不提示，而且还能提交成功。fCX无知

fCX无知

1、el-form

:model务必绑定到，每个el-form-item绑定的v-model，且需绑定 :rulesfCX无知

1	`<el-form` `ref="postForm"` `:model="postForm"` `:rules="rules"` `class="form-container">`

ref也需要设置，在调用验证时需要使用fCX无知

fCX无知

2、el-form-item

el-form-item上的prop必须与v-model同名，例如下面的 prop="orgName" 对应 v-model="postForm.orgName"，不设置 prop 或设置错误的话，就不会显示提示信息fCX无知

<el-form-item label-width="180px" label="组织名称:" class="postInfo-container-item" :required="true" prop="orgName">
<el-input v-model="postForm.orgName" placeholder="必填" />
</el-form-item>

3、data “postForm”

应该存在"postForm",即上述 el-form model中绑定的对象，本例为：postFormfCX无知

export default {
  data() {
    return {
      postForm: Object.assign({}, defaultForm),
      rules: {
        orgName: [{ required: true, message: '请输入组织名称', trigger: 'blur' }],
        linkman: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
        linkmanMobile: [{ required: true, message: '请输入联系人电话', trigger: 'blur' }],
        orgCertificationUrl: [{ required: true, message: '请上传组织资质证书', trigger: 'blur', type: 'url' }]
      }
    }
  }
}

4、data “rules”

应该存在rules，即在el-form中:rules绑定的对象，参见上面代码中的 rules 定义fCX无知

fCX无知

5、验证不通过还能提交的问题

validate 方法中的 return false 只是退出 validate 方法的执行。fCX无知

    async submitForm() {
      let notifyTitle = '保存'
      let validateFlag = true
      this.$refs['postForm'].validate(valid => {
        if (valid) {
          this.loading = true
          validateFlag = true
        } else {
          validateFlag = false
          console.log('error submit!!')
          return false
        }
      })
 
      if (!validateFlag) {
        return false
      }
       
      // 以下为提交表单相关代码
      if (this.isEdit) {
        // this.postForm.status = 1
        const { data } = await updateSociety(this.postForm)
        console.log('data====', data)
        this.postForm = data
        this.$notify({
          title: notifyTitle + '成功',
          message: notifyTitle + '组织信息成功',
          type: 'success',
          duration: 2000
        })
      } else {
        // this.postForm.status = 1
        notifyTitle = '添加'
        const { data } = await addSociety(this.postForm)
        console.log('data', data)
        // this.postForm = data
        this.$notify({
          title: notifyTitle + '成功',
          message: notifyTitle + '组织成功',
          type: 'success',
          duration: 2000
        })
      }
      // this.postForm.status = 'published'
      this.loading = false
    }