elementui el-form自定义校验规则后表单验证this.$refs[formName].validate不生效的问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
明明我输入的值是符合规则的,但是点击确定硬是没有任何反馈,原来是通过验证的时候我少了return callback()
错误示范
<template>
<div class="app-container">
<el-dialog
title="礼物信息"
:visible.sync="dialogVisible"
:before-close="handleClose"
top="30px"
>
<el-form
ref="ruleForm"
:rules="rules"
:model="ruleForm"
label-width="120px"
>
<el-form-item label="字体颜色" prop="hightFontColour">
<el-input
v-model="ruleForm.hightFontColour"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button
type="primary"
@click="submitForm()"
>确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
var validateColor = (rule, value, callback) => {
console.log('nim', value)
var regex = /^#([0-9a-fA-F]{6})$/
if (value === '') {
return callback(new Error('字体颜色不能为空'))
}
setTimeout(() => {
if (!regex.test(value)) {
return callback(new Error('例:#2d3eld'))
}
}, 1000)
}
return {
dialogVisible: true,
ruleForm: {
hightFontColour: ''
},
rules: {
hightFontColour: [
{ required: true, validator: validateColor, trigger: 'blur' }
]
}
}
},
methods: {
handleClose() {
this.dialogVisible = false
},
submitForm() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
console.log('验证通过')
this.dialogVisible = false
}
})
}
}
}
</script>
修复后(记得验证成功要return callback())
var validateColor = (rule, value, callback) => {
console.log('nim', value)
var regex = /^#([0-9a-fA-F]{6})$/
if (value === '') {
return callback(new Error('字体颜色不能为空'))
}
setTimeout(() => {
if (!regex.test(value)) {
return callback(new Error('例:#2d3eld'))
} else {
return callback() // 补上else并retrun callback()
}
}, 1000)
}
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:5 个月前 )
c345bb45
9 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 9 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)