element-ui form表单校验成功,却不走this.$refs.form.validate(valid => {})回调(element-ui踩过的坑)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
同事遇到了这种情况,网上搜索解答如下:
这是有问题的代码,验证错误,this.refs.form.validate(valid => {})回调
data() {
// 校验时间
let validatePerson = (rule, value, callback) => {
if (!value.length) {
callback(new Error('请选择参与人员'))
}
}
let validateName = (rule, value, callback) => {
if (value === '') {
callback(new Error('请填写日程名称'))
}
}
let validateBeginTime = (rule, value, callback) => {
if (value === '') {
callback(new Error('请选择开始时间'))
}
}
let validateEndTime = (rule, value, callback) => {
if (this.form.begin_time === '') {
callback(new Error('请选择结束时间'))
}
if (this.form.begin_time > this.form.end_time) {
callback(new Error('结束时间大于开始时间'))
} else {
callback()
}
}
return {
form: {
name: '',
type: '1',
begin_time: '',
end_time: '',
users: [],
notes: ''
},
rules: {
name: [{ validator: validateName, trigger: ['blur', 'change'] }],
begin_time: [{ validator: validateBeginTime, trigger: 'blur' }],
end_time: [{ validator: validateEndTime, trigger: 'blur' }],
users: [
{ required: true, message: '请选择参与人员2', trigger: 'blur' },
{
validator: validatePerson,
trigger: 'change'
}
]
}
}
},
methods: {
// 确认提交表单
submitSchedule() {
this.$refs.form.validate(valid => {
if (valid) {
// 传参
let params = {
name: this.form.name,
type: this.form.type,
begin_time: Number(this.form.begin_time) / 1000,
end_time: Number(this.form.end_time) / 1000,
users: this.form.users.join(','),
notes: this.form.notes
}
this.update(params)
}
})
}
}
原因,成功时没有调用,即成功则走callback()回调。
let validatePerson = (rule, value, callback) => {
if (!value.length) {
callback(new Error('请选择参与人员'))
} else {
callback() // 添加成功回调
}
}
let validateName = (rule, value, callback) => {
if (value === '') {
callback(new Error('请填写日程名称'))
} else {
callback() // 添加成功回调
}
}
let validateBeginTime = (rule, value, callback) => {
if (value === '') {
callback(new Error('请选择开始时间'))
} else {
callback() // 添加成功回调
}
}
let validateEndTime = (rule, value, callback) => {
if (this.form.begin_time === '') {
callback(new Error('请选择结束时间'))
}
if (this.form.begin_time > this.form.end_time) {
callback(new Error('结束时间大于开始时间'))
} else {
callback() // 添加成功回调
}
}
作者:前端青音
链接:https://www.jianshu.com/p/b150eac5ea2e
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
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 8 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)