前端开发您现在的位置是:首页 > 博客日志 > 前端开发

element form表单验证无效

<a href='mailto:'>微wx笑</a>的头像微wx笑2021-02-23 16:56:59前端开发人已围观关键字: element  form  表单验证  

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

element form表单验证无效,添加了验证规则,但是提交时页面不提示,而且还能提交成功。aP0编程技术_踩坑日志_进阶指南_无知人生


aP0编程技术_踩坑日志_进阶指南_无知人生

1、el-form

:model务必绑定到,每个el-form-item绑定的v-model,且需绑定 :rulesaP0编程技术_踩坑日志_进阶指南_无知人生

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

ref也需要设置,在调用验证时需要使用aP0编程技术_踩坑日志_进阶指南_无知人生


aP0编程技术_踩坑日志_进阶指南_无知人生

2、el-form-item

el-form-item上的prop必须与v-model同名,例如下面的 prop="orgName" 对应 v-model="postForm.orgName",不设置 prop 或设置错误的话,就不会显示提示信息aP0编程技术_踩坑日志_进阶指南_无知人生

<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中绑定的对象,本例为:postFormaP0编程技术_踩坑日志_进阶指南_无知人生

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 定义aP0编程技术_踩坑日志_进阶指南_无知人生


aP0编程技术_踩坑日志_进阶指南_无知人生

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

validate 方法中的 return false 只是退出 validate 方法的执行。aP0编程技术_踩坑日志_进阶指南_无知人生

    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
    }

要退出 submitForm 方法的执行,我添加了一个变量 validateFlag,需要在外层根据 validateFlag 变量再执行一次 return false,这样后面的代码才不会被执行。aP0编程技术_踩坑日志_进阶指南_无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()