element form表单验证无效
微wx笑
2021-02-23【前端开发】
4
0关键字：
element form 表单验证
element form表单验证无效，添加了验证规则，但是提交时页面不提示，而且还能提交成功。
element form表单验证无效，添加了验证规则，但是提交时页面不提示，而且还能提交成功。
1、el-form
:model务必绑定到，每个el-form-item绑定的v-model，且需绑定 :rules
<el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
ref也需要设置，在调用验证时需要使用
2、el-form-item
el-form-item上的prop必须与v-model同名，例如下面的 prop="orgName" 对应 v-model="postForm.orgName"，不设置 prop 或设置错误的话，就不会显示提示信息
<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中绑定的对象，本例为：postForm
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 定义
5、验证不通过还能提交的问题
validate 方法中的 return false 只是退出 validate 方法的执行。
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，这样后面的代码才不会被执行。
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/front/2021-02-23/620.html
