this.$refs.form.validate(valid => {
if (!valid) {
this.$message.warning('请完善必填信息')
return false
}
}
通过在form表单中设置ref='form' 使用el 默认的validate 实现,统一校验
方法二.缺陷:
并不是每一条实时d出警示框, 只在提交时统一d出警示框
data () {
let validate = (rule, value, callback) => {
if (!value) {
this.$message.warning('请完善必填信息')
callback(new Error('请完善必填信息'))
}
}
const input = { validator: validate, required: true, trigger: 'blur' }
const select = { validator: validate, required: true, trigger: 'change' }
return {
通过自定义校验实现效果, 会实时d出警示框, 但是如果必填项过多未填写, 会d出多个警示框,
可以通过修改message开限制次数
message限制方法具体如下.
1. 创建一个js文件
import { Message } from 'element-ui'
let messageInstance = null
const resetMessage = (options) => {
if (messageInstance) {
messageInstance.close()
}
messageInstance = Message(options)
};
['error', 'success', 'info', 'warning'].forEach(type => {
resetMessage[type] = options => {
if (typeof options === 'string') {
options = {
message: options
}
}
options.type = type
return resetMessage(options)
}
})
export const message = resetMessage
2. 在main.js中导入
import { message } from '导入的message文件地址'
Vue.prototype.$message = message
缺点
代码较多, 自行选择
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)